#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    27
    Rep Power
    0

    Menu partially obscured by mystery items...


    I've hand-coded a test (responsive) home page for someone and have hit a problem with the navigation menu, which sits in the left-hand column below the full-width main image on largest device widths. The bottom three menu items work fine but the five above them do not. Those five show no change when hovering over them. They should behave the same as the three below them.

    All other aspects of the page work as intended at all device widths.

    Stripping away all the html and css code except the menu and the main image appears to show that it is the white text sitting over the main image that is the problem, even though it's inside a containing div! At first I thought it was the four images in the html (called up by media queries) but removing all except one has no effect on the problem. (The four images are there to adjust the appearance of the very wide main image on smaller devices.)

    I may be wrong about the text over the main image being the problem, but whatever it is I am at a loss to fix it!

    When the device width is below 601px the left-hand side column is hidden along with its troublesome menu. It gets (correctly) replaced by the usual three-line menu icon, which reveals a replacement menu (with the same content) that works properly.

    html for main image area
    Code:
    <div id="container">
    <p><a href="#mobile_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
    	<div id="header">
        
            <div id="headerimage" title="Inner Clarity Counselling 07531 966 701">
            	<img class="topmostimage480" src="a/img/lakewithstones-460.jpg" alt="">
            	<img class="topmostimage600" src="a/img/lakewithstones-600.jpg" alt="">
            	<img class="topmostimage770" src="a/img/lakewithstones-770.jpg" alt="">
    			<img class="topmostimage940" src="a/img/lakewithstones-940.jpg" alt="">
    			<div id="logo"></div>
    			<div id="ap">Inner Clarity <br class="breakat516">Counselling</div>
    			<div id="apqual">Angela Peel BA (Hons), <br class="breakat479">PGDip, MBACP <br class="breakat606">Tel: <span class="appleLinksWhite">07531 966 701</span></div>
            </div><!-- end of headerimage -->
            
        </div><!-- end of header -->

    Relevant css
    Code:
    /* over 771px screen width */
    @media (min-width:771px) {
    #container { max-width:940px; height:auto; padding:0; margin: 45px auto 0 auto;}
    #header {width:100%; margin-bottom:2em; }
    #sidebar-L { width: 16%; margin-left:7%; margin-right:3.5%; float: left; } 
    #main-content { width: 48%; min-width:280px; max-width:430px; margin-right:3%; margin-bottom:2.7%; float: left; } 
    #sidebar-R { width: 18%; float: left; } 
    #footer { width: 100%; height: 100px; clear: both; } 
    
    #mobile_nav {display:none;}
    #access-nav {display:none;}
    .access_aid {display:none;}
    
    @media (min-width:771px) and (max-width:865px) {#main-content { margin-left:20px;}} /* margin for min gutter width */
    
    /* For placing type over header image */
    #headerimage { position:relative;}
    .topmostimage480 { display:none;}
    .topmostimage600 { display:none;}
    .topmostimage770 { display:none;}
    #logo {color:#fff; background: url(../img/icclogosmallwhite.png) no-repeat 0 0; position:absolute; top: 66%; left: 4%; width: 100%; height: 100%;}
    #ap {color:#fff; font-size: 1.875em; font-weight:600; line-height:1.1em; display:inline-block; position: absolute; top: 64%; left: 10%; }
    #apqual { color:#fff; font-size: 1em; font-weight:400; letter-spacing: 0.03em; display:inline-block; position: absolute; top: 79%; left: 10%; }
    
    @media (min-width:770px) and (max-width:855px) {
    #ap {color:#fff; font-size: 1.875em; font-weight:600; line-height:1.1em; display:inline-block; position: absolute; top: 64%; left: 11%; }
    #apqual { color:#fff; font-size: 1em; font-weight:400; letter-spacing: 0.03em; display:inline-block; position: absolute; top: 79%; left: 11%; }
    }
    Test page http://www.innerclarity.co.uk/z-test/index.html

    Main CSS www.innerclarity.co.uk/z-test/a/css/styles.css

    (Problem) Menu CSS http://www.innerclarity.co.uk/z-test.../navi-menu.css
    Last edited by sansarin; November 16th, 2016 at 08:51 AM. Reason: to add specific code to make analysis easier
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133
    Hi there sansarin,

    try changing this...

    Code:
    
    #logo {
        color: #fff;
        background: url(../img/icclogosmallwhite.png) no-repeat 0 0;
        position: absolute;
        top: 66%;
        left: 4%;
        width: 100%;
        height: 100%;
    }
    
    ...to this...

    Code:
    
    #logo {
        color: #fff;
        background: url(../img/icclogosmallwhite.png) no-repeat 0 0;
        position: absolute;
        top: 66%;
        left: 4%;
        width: 100%;
        height: auto;
    }
    

    coothead

    Comments on this post

    • sansarin agrees : Simple and expert correction given
    ~ the original bald headed old fart ~
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    27
    Rep Power
    0
    I did and it worked! Such a simple mistake. I have spent hours and hours trying to fix this and never noticed that simple error. Thank you so much. I am very grateful.

    Your moniker is far too self-deprecatory: You may be (physically) old and bald-headed but you cannot be boring if you are so alert and well-informed. Thanks again.
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133
    Hi there sansarin,


    No problem, you're very welcome.

    I could have added 'boring' to my signature but
    the scansion would not have been quite right.

    coothead
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo