Jump to content
hireconrad

How To Stretch Main Nav Bar Buttons Full Width?

Recommended Posts

hireconrad

Hi,
I've decided to remove the search function off of my site, so now I have a blank space on my nav where the search used to be. How do i distribute all the buttons so they are evenly spaced across the whole bar?
 

 

good-bar-arrow_zps680da348.jpg

 

hireconrad.com/hireconrad

Share this post


Link to post
Share on other sites
James B

Hi Conrad

 

You'll need to adjust the length of the list using css, adjusting the padding/margins for each tab in the menu until they space out and fill the entire width of the navbar.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hireconrad
Hi Conrad

 

You'll need to adjust the length of the list using css, adjusting the padding/margins for each tab in the menu until they space out and fill the entire width of the navbar.

 

Ive fumbled around firebug and was able to get the "more" button all the way to the right edge, however the right divider of the "more" button still shows up. If i go a pixel further, a whole new bar line appears below and sticks the "more" button below left under "home"

Share this post


Link to post
Share on other sites
James B

You can target the li class of the last item and turn off the border. An example below

 

.page_item .page-item-24 {border-right:none; }


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hireconrad

Ive removed the More button now, but I'm still having issues with getting the last menu item all the way to the end of the bar. If i make the buttons any wider, a second menu bar appears below.

 

nav1_zps21bb070b.jpg

Share this post


Link to post
Share on other sites
hireconrad
You can target the li class of the last item and turn off the border. An example below

 

.page_item .page-item-24 {border-right:none; }

 

i tried your suggestion by adding the following code:

#page .main_nav #menu-item-1811 a {border-right:none; }

 

however there are 2 remaining issues: 

1) there is a box-shadow property that still delineates the original button

2) when hovering over the Blog button, the hover effect does not go all the way to the right

Share this post


Link to post
Share on other sites
James B

You can edit both with css to correct, the box shadow can be edited on the below code. The hover button you can add a width to

#menu-item-1811 a:hover and put in a pixel amount with !important to stretch it to the end of the bar

 

 

#page .main_nav li a:hover {  box-shadow: 0 0 5px #666666 inset;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hireconrad

I added the following code to fix the box shadow:

 

#page .main_nav #menu-item-1811 a {
	border-right:none; 
 	box-shadow: 0 0 0px #666666 inset;
}  

 

 

I added your suggestion of 

#menu-item-1811 a:hover {
width:94px!important;
}

 

however this moves the "Blog" text as well, so the text is in a different position when hovering vs default

Share this post


Link to post
Share on other sites
hireconrad

I added 

#page .main_nav #menu-item-1811 a {
	border-right:none; 
 	box-shadow: 0 0 0px #666666 inset;
	width:94px!important;
}  

 

and now its working properly.

 

Thanks.

 

This is now resolved.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×