Changing color, font, and spacing in menu bar

pabloconradphotography · Member · Mar 13, 2014 at 9:25 pm
Copy link

Add topic to favorites
Hello,

Hope all is well.

I want to change the menu bar in my blog, which is the McKinley theme, so it matches my website better. It’s close, but if I can change the spacing of the menu items, the font, the hover effect, and the background color, I’d be forever grateful.

I’ve already set the links to where I need them to point.

My site is http://www.paulconrad.photography for reference. It uses Roboto as the menu font.

Thanks in advance for your help.

The blog I need help with is: (visible only to logged in users)
pabloconradphotography · Member · Mar 13, 2014 at 11:21 pm
Copy link
bump
hfzrhmn · Member · Mar 13, 2014 at 11:48 pm
Copy link
Hi,

Seeing that your request was rather unspecific (change spacing to what, what to do with the hover effect, etc), here’s my attempt with some general answers. You can tweak the numbers and values yourself.

Spacing of menu items:
```
.nav-menu > li {
	margin-left: 3px;
}
```
Change the menu item font:
```
.nav-menu a {
	font-family: Arial, Helvetica, sans-serif;
}
```
Main navigation menu background color:
```
.nav-menu {
	background: #cc0000;
}
```
Dropdown/submenu background color:
```
.nav-menu .sub-menu, .nav-menu .children  {
	background: #0000cc;
}
```
Hope this helps!
pabloconradphotography · Member · Mar 14, 2014 at 4:43 pm
Copy link
Thank you . Pretty much what I was looking for concerning the fonts and background color.

Now how can I change the spacing on the navbar/menu so it is justified on the left and right. Here’s my main website: http://www.paulconrad.photography

The code below doesn’t work:

.nav-menu > li {
margin-left: 3px;
}

Thanks again for the help.
pabloconradphotography · Member · Mar 14, 2014 at 4:46 pm
Copy link
ADDENDUM: I changed the value “3px” with no effect.

The overall effect I want is that I want the layout and design to match my website so when someone clicks on the “BLOG” link, on my site, it opens a new page to my WordPress blog which looks the same.

Thanks Again.
thesacredpath · Member · Mar 14, 2014 at 7:00 pm
Copy link
I tried changing the left margin to 3px and it worked. Remove that CSS rule though and add the following and see what you think. I’ve matched font size and color to what you have on your main site and changed the left margin to right and increased it to 10px. You need to check it in a couple different browsers though since the 10px is right on the edge of shifting things to a second line. I might suggest setting it to 9px to be on the safe side.
```
.nav-menu > li {
    margin-right: 12px;
}
ul.nav-menu, div.nav-menu > ul {
    padding-right: 0;
}
.nav-menu li a {
    font-weight: normal;
    color: #D9D9D9;
    font-size: 14px;
}
```
Let me know what you think.

No items found.