Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #369184

    If you choose to have the Logo & Main Menu in the Left or Right sidebar they will extend beyond the containing div when the menu is longer than the main content text. For example, on a homepage I have one paragraph of text in the main content area with the logo and nav menu in the left sidebar. The nav menu has 10 top level items. It extends beyond the content area over the background color & pattern.

    Tested with a clean install to verify that this is an issue with the way the sidebar is laid out (absolutely positioned and content areas using overflow: hidden).

    Can you tell me what styles to adjust to correct this?

    Thanks.

    #369295

    Hi wunderdojo!

    Thank you for using Enfold.

    You can set the Sticky Sidebar menu to Never Sticky so that the sidebar will not scroll with the content. A link to the actual website will help.

    Cheers!
    Ismael

    #369857

    Hi Ismael,

    Thanks for the response but that’s not the issue. If you choose to have the logo and nav menu in the left sidebar the CSS accomplishes that by using absolutely positioned divs. So if the nav menu is longer than the main content it will extend beyond the containing div and overlap whatever background you have set.

    I made some changes via CSS to fix it but it seems like a bug with Enfold — it only displays as expected if the main content is longer than the sidebar.

    /** Fixes to the left sidebar logo and nav menu */
    .html_header_sidebar #top #header{
    	float:left;
    	position:relative!important;
    	background-color:#ffffff;
    	width:33%;
    	}
    
    .html_header_left #main{
    	float:left;
    	width:66%;
    	margin-left:0px;
    	}
    .responsive.html_header_left #main{
    	margin-left:0px;
    	}
    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {	
    	.responsive.html_header_left #main{
    		margin-left:0px;
    		width:100%;
    		}
    	}
    #370290

    Hey!

    Can you please provide a link to the website so that we can see the fix in action? My idea is to set a min height for the wrap all container so that you can still see the whole sidebar even if the content is shorter.

    #wrap_all {
    min-height: 900px;
    }

    Use css media queries to adjust the height on different screen sizes.

    Regards,
    Ismael

    #370300
    This reply has been marked as private.
    #370444

    Hi!

    Your website is unaccessible, at least for me:

    Reason: Access from your area has been temporarily limited for security reasons
    

    Please temporarily remove the region-block so we can help you.

    Cheers!
    Josue

    #370753

    What country are you connecting from? I’m using WordFence to block non-US IP addresses since all of the customers for this particular platform are US-based.

    #370850

    Hey!

    I didn’t see the problem on your site but I think your wanting to do this.

    #header { height: auto !important; }
    #wrap_all { overflow: visible !important; }
    

    Cheers!
    Elliott

    • This reply was modified 9 years, 3 months ago by Elliott.
    #370862

    Beautiful! Looks like that works great and a lot less complicated than my modifications. Thanks so much for the help. This is why I only build in Enfold these days (and actually have been recommending it to students I’m teaching WP to).

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Header & Nav in Sidebar Extend Beyond Wrapper Div’ is closed to new replies.