Twenty Eleven Nav Bar Stretch Full Width

  • Resolved ragdoll-sensei

    (@ragdoll-sensei)


    11 years, 11 months ago

    This question has been asked many times in the forums, and none of the answers are working for me.
    HOW DO YOU STRETCH THE HORIZONTAL NAV BAR LINKS THE FULL WIDTH OF THE PAGE?
    Here is the site:
    https://deeprootednutrition.com

    Here is the CSS:

    #access {
	background-image: url('https://deeprootednutrition.com/wp-content/uploads/2013/04/navpic.png');
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	display: block;
	clear: both;
	float: left;
	width: 100%;
	opacity: 80;
	text-align: justify;
}

#access a {
	color: #ffffff;
	font-weight: bold;
	text-shadow: green .1em .1em .2em;
	text-align: justify;
	padding: 5px;
}

    What am I not seeing here?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to change the page structure so the navigation is not limited by an element with a width. The constraining element is currently <div id="page">.

    Do you have a Child Theme?

    Thread Starter ragdoll-sensei

    (@ragdoll-sensei)

    No, but I can make one if this will require some heavy duty editing. What do you suggest as a fix?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Create a Child Theme and copy your header.php file into your Child Theme directory.

    You page div, which contains the whole content, has a max width of 1000px, which causes your navigation to be 1000 pixels. If you change it to 1100px, the navigation will also become 1100 pixels.

    Like Andrew said, you need to change your page structure because <div id=”page”> is constraining the navigation with its max width property.

    Thread Starter ragdoll-sensei

    (@ragdoll-sensei)

    Done.
    I see page div in header.php. Which line needs to be modified with what?
    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Replace your Child Theme header.php file contents with this code https://pastebin.com/JJeYRq1W

    Thread Starter ragdoll-sensei

    (@ragdoll-sensei)

    That sort of fixed it, but is there any way to do it without setting a fixed width for the nav bar? Not to be picky, but from a design perspective it’s very frustrating. The nav links are still resisting the stretch all the way across the page. Almost like there is some invisible block on the right hand side preventing it. Could this have been cause by the method I used to remove that annoying search bar from the navigation?

    /* to stop Search Form in header area*/
#branding #searchform {
	display: none;
}

    Not a giant deal if no one knows how to get around this. The client is pretty apathetic about the site design, so I can work with this solution if it’s the only one. I appreciate your help so much!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The <body> element still has padding.
    To get around this without affecting all other elements, add this to your Child Theme style.css file:

    body {
 padding: 0;
}

#page {
 padding: 0 2em;
}

    Note: Your HTML is not strictly valid because you now have two HTML elements with the same ID.

    Thread Starter ragdoll-sensei

    (@ragdoll-sensei)

    This helped, and it looks good enough for me. ^_^ Thanks so much!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Twenty Eleven Nav Bar Stretch Full Width’ is closed to new replies.