Twenty Eleven how to achieve full width navigation menu

Because the menu element #access is inside the container element #page, the menu won’t break outside the lines of the parent element unless you change the positioning.

You will have to test this solution in different browsers to make sure it works everywhere, but here’s one possible way you might be able to break the menu out of the #page container:

#branding {
	position: static;
	padding-bottom: 43px;
}
#access {
	position: absolute;
	left: 0;
	width: 100%;
}

If you get it working, you may also want to center the menu too:

#access {
	text-align: center;
}
#access ul {
	display: inline-block;
}
#access li a {
	margin-bottom: -6px
}

Note that a solution like this won’t work well on mobile if the menu has more than one or two items in it because the menu is no longer in the normal flow of the DOM and therefore other surrounding elements don’t give it any space (that’s why padding is added manually to the bottom of #branding). To get around that, you can apply the changes only to large screens so that all the responsive design and default variable height of the menu still works well on small screens like mobile and tablets. To apply the example above just to browser widths of 960px and higher, you can wrap all of the related CSS into a media query like this one:

@media screen and (min-width: 960px) {
	/* put your css here */
}

Adjust the 960px number to what looks best for your site based on your menu width.

Another route could be to apply a different padding-bottom value to different major breakpoints so that the menu has enough room even if it falls to more than one line.

FTR, I experimented with this in-browser on https://twentyelevendemo.wordpress.com/ using the web inspetor in Chrome 34.0.1847.116 on a Mac to test CSS changes.

designsimply,

Thank you very much for such a detailed and informative response. That is really helpful and very kind.

Regards,

Rob