[consafoParticipant]

Greetings,

I’d like to reduce the space between menu items to save some space up top. I see there is a menu font setting in the admin area, but no setting for spacing.

Next I thought I’d drop in some custom css. Went looking at the renew.css file, but this file is hard to read. There are no line breaks, making it very hard for someone like me to interpret.

Can you give me some css that I can drop into the custom area of the customizer?

[consafoParticipant]

One more thing somewhat related….

If I want to make one menu item a different color for emphasis, I assume I can create a css class and assign it to that menu item using wordpress menu section. There is a css class assign per menu item.

Can that css class be inserted into the custom area of the customizer? Or will I need to alter the actual .css file?

[ChristianModerator]

Hey there,

For the menu spacing, please add the code below in your Appearance > Customize > Custom > CSS.

.x-navbar .desktop .x-nav > li > a {
padding-left: 10px;
padding-right: 10px;
}

To know what selectors to use, please see this tutorial https://www.youtube.com/watch?v=dlQrFFwAC_A

For the menu color, please enable Menu CSS Classes option in the Menu Editor upperright hand corner first if you haven’t done so yet (see http://prntscr.com/5fhhdo). Then, add your class to the menus like http://prntscr.com/5fhhqy.

You can then add the code below in your Appearance > Customize > Custom > CSS (sample only).

.x-navbar .x-nav > li.your-class > a {
color: green;
}

Hope that helps. 🙂

[consafoParticipant]

Thanks for getting back to me.

First issue: Spacing between menu items. I put the code you gave me into the customizer. I’ve got a screen shot for you here:

http://publicpolicycenter.texascjc.org/wp-content/uploads/2014/12/Screen-Shot-2014-12-12-at-4.55.59-PM.png

I was expecting that the css you provided would reduce or increase the space between words in the menu item. But I confess the “padding” element surprised me. That seems more like something that is for a container. But I put it in there as you instructed. I see no difference in the menu items no matter what that number is. I even tried it at 60px just to see what it was doing.

Maybe I wasn’t clear. I’m hoping to have the ability to adjust the spacing between words in the main menu. My menu items are just a little too much for the space and the entire menu drops down.

[consafoParticipant]

I need a little more help here. I get the feeling that I need to be able to identify a class or ID using the inspect element tool. But I’m lost in there. I see your instruction “To know what selectors to use, please see this tutorial https://www.youtube.com/watch?v=dlQrFFwAC_A” but I guess I don’t have enough knowledge to work with that.

Here is how I thought this would work:

1. I would create a class using a css snippet in the customizer. Your example:

.x-navbar .x-nav > li.your-class > a {
color: green;
}

Unfortunately, I don’t know if this was just an example or if I’m supposed to replace your-class with something. Perhaps something I found using the inspect element tool??

2. Once I created a class with a color, I assumed I could add it to the menu item that i want to change colors. I understand the concept. I just don’t know what that class would be called, whether or not I’m to create it, etc.

Can you be a little more basic in your instructions?

gordon

[ChristopherModerator]

Hi there,

Please change your CSS to this code:

.x-navbar .x-nav > li > a {
padding-left: 14px;
padding-right: 14px;
}

I can see you added red class to menu item,you need to add CSS and use !important method:

.red a {
color: red !important;
}

Hope that helps.

[consafoParticipant]

Color thing helped. Thanks. now that I see the pattern, I can use that.

Menu spacing between the words is not working well. When I loaded your code (14px left and right) it made a difference. The space increased. I’m looking to decrease, but I thought I’d just lower the number.

I got all the way down to zero. Still a fair amount of space between words. I went to -1 and it decreased. I thought, “Cool, I can use negative numbers.” But they don’t seem to work below 0 or -1.

Current settings in the custom area:

.popover, .popover-title {
background-color: #7aa3bd;
color: #000000;
}
.popover .arrow {
border-top-color: #5E3A11!important;
}

.x-navbar .x-nav > li > a {
padding-left: 1px;
padding-right: 1px;
}

.red a {
color: #be1313 !important;
}

Still a lot of space between words. I’ve got to maximize that area but don’t want to go to the logo center and menu below it, as my logo is really sized more to be on the left.

http://publicpolicycenter.texascjc.org/

[Paul RModerator]

Hi,

Sorry for the confusion there, to adjust the word spacing in your menu items,
You can add this under Custom > CSS in the Customizer.

.x-navbar .x-nav > li > a { 
    word-spacing: 30px;
}

You may change 30px to achieve your desired word spacing.

Hope that helps! 🙂

[Author]

Posts