Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 16, 2014 at 9:55 pm #369184
    wunderdojo

    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.

    December 17, 2014 at 3:29 am #369295
    Ismael

    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

    December 18, 2014 at 5:25 am #369857
    wunderdojo

    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%;
		}
	}
    December 18, 2014 at 11:33 pm #370290
    Ismael

    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

    December 18, 2014 at 11:44 pm #370300
    wunderdojo
    This reply has been marked as private.
    December 19, 2014 at 5:17 am #370444
    Josue

    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

    December 19, 2014 at 8:48 pm #370753
    wunderdojo

    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.

    December 20, 2014 at 1:13 am #370850
    Elliott

    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 10 years ago by Elliott.
    December 20, 2014 at 2:20 am #370862
    wunderdojo

    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).

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