How do I set a minimum width for my menu items

[ngolay]

Hi there I have searched this question using various terms but have not found an answer relating exactly to my issue.  I just don’t remember how to do this or if it can be done:  I have centered my menu and I am playing with the idea of using the right border as a vertical separator using CSS, just to see if I like how it looks. I have managed to get the vertical line to appear but I would like them to be evenly spaced so basically I think that I need to set a minimum width or something to my menu items so that the vertical lines  are evenly spaced between the words ( this will also have to happen on hover etc. ) I have tried a few things but I can’t figure it out.  Is there some simple css syntax that I can add in advanced options or to the menu settings to get the result I am looking for?

Also, I was going to use all caps for my menu items but I can’t figure out where to edit the default “Home” label that weaver uses when you set the front page.

Thank you!

[scrambler]

We cant do anything without a link and specific about what you have done so far.

Pro has an option for vertical separator. if you don’t have pro, you can use the method explained in the tutorial below

http://forum.weavertheme.com/discussion/8003/infos-and-examples-for-custom-css-rules-part-10#Item_1

[Weaver]

EDIT: My answer overlapped @scrambler ‘s in time. I think this is the answer, however.

Try adding this CSS to the Global Custom CSS box (Customizer : Custom CSS : Global Custom CSS -or- Main Options : Fonts & Custom : Custom CSS Rules)

#nav-primary .weaverx-theme-menu > li {border-right: 2px solid blue;min-width:140px;}
#nav-primary .weaverx-theme-menu > li:first-child{border-left:2px solid blue;}

This is for the primary menu. Works for secondary if you use #nav-secondary.
Change the divider color and width as desired. Change the min-width as needed.

As an alternative, you could instead add the following CSS to the CSS+ for the Primary Menu.

(Customizer : Custom CSS : Menus : Primary Menu Bar Custom CSS; Legacy: Main Options : Menus : Primary Menu Bar : Menu Bar BG CSS+)

.weaverx-theme-menu > li { border-right: 2px solid blue;min-width:140px;}
%selector% .weaverx-theme-menu > li:first-child{border-left:2px solid blue;}

[ngolay]

@Scrambler, thanks. yes I got the vertical lines that was not an issue ( although I may not have done it is n the right place) I just wanted them separated evenly I didn’t think you would need a link for that.  It is currently pw protected because even though it is in a subfolder people were landing on the page by mistake and it is not ready. There is another active site for them. 

@weaver: thanks so much!  I will try that for the spacing etc. much appreciate your input!  As I read your css I think it might be for weaver extreme???  But maybe I can adapt for weaver ii. Will give it a shot.

Thank you both for replying so quickly! 🙂

[Weaver]

Oops – sorry. Missed that, but the code should be adaptable to Weaver II. Just find the ID and name of the menu bar wrapper class. I think the li will be the same.

[ngolay]

@ weaver thanks so much I have kind of worked it out to something I can live with actually after both responses I just went back and started paying with it. 

[Author]

Posts