Expand the horizontal header menu in 2011

  • Resolved peterk900

    (@peterk900)


    10 years, 7 months ago

    This forum showed me how to remove the search box from the header navigation bar..

    #branding #searchform {
	display:none;
}
#branding .only-search + #access div {
	padding-right: 0px;
}

    .. which works brilliantly.

    I now want to use some of the space for extra menu items.

    I found this css..

    #access ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;

    .. but the width of 168px is not the width of the current bar !

    Can someone suggest what css I need to edit. Thanks

Viewing 7 replies - 1 through 7 (of 7 total)

  • Can you please provide a link to your site? It will make it easier to see what needs to be done.

    Thread Starter peterk900

    (@peterk900)

    Thanks – https://recoveringthegospel.co.uk

    Thread Starter peterk900

    (@peterk900)

    OK, the CSS that you listed above refers to the submenu items, e.g., 8th Century Prophets under Studies, and Itinerary under Events. You can tell because the rule has two ul elements as part of the selector (one unordered list nested below another).

    The general rule which affects the menu items is this:

    #access a {
   color: #eee;
   display: block;
   line-height: 3.333em;
   padding: 0 1.2125em;
   text-decoration: none;
}

    As you can see, there is no property which defines the general width of the menu items, unlike the width that is specifically set for the submenu items. You’ll also note that as you hover over all of the top-level menu items, the width just depends on how many characters make up the menu text, all of the widths are different.

    So I am unclear on what you mean by wanting to “use some of the space for extra menu items.” There seems to be plenty of room to the right of the Links menu item to add one or two more menu items. Or do you mean you want to space out the existing menu items so there’s more room between them?

    OK, I see your problem. The CSS that you added at the very top of this post should have been added to the bottom of your style.css file. The location where you added it is above the location of the original rule, which means the original rule is overriding your change. Move your added CSS to the bottom of the style.css file, and you should be able to add additional menu items without it wrapping.

    Thread Starter peterk900

    (@peterk900)

    Thank you CrouchingBruin, not only for solving my problem but also for the detailed explanation – I’m afraid I was so excited that the code to remove the search box worked that I forgot that where you place code in a css file has an effect on how it works with other conflicting rules. Thanks again.

    Thread Starter peterk900

    (@peterk900)

    Resolved. Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Expand the horizontal header menu in 2011’ is closed to new replies.