Goran – how to adjust font size of drop down menu?

isabelashdown · Member · Mar 15, 2016 at 9:57 am
Copy link

Add topic to favorites
I’ve just added a drop down list to my custom menu (under ‘Books’) and I want to customise it to reduce the font size and change from capital letters to lower case.

I’d also like to change the drop down box from a red block background to translucent.

Any suggestions? Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 15, 2016 at 8:06 pm
Copy link
Hi, this will do the text in the submenus. Not knowing if you wished to keep the same base color, I’ve kept that. I’ve also included a hover rule to turn the submenu items slightly darker when someone hovers over them.
```
.main-navigation .sub-menu.toggle-on a {
    font-size: 70%;
    text-transform: lowercase;
    background-color: rgba(161, 55, 54, 0.5);
}
.main-navigation .sub-menu.toggle-on a:hover {
    background-color: rgba(161, 55, 54, 0.8);
}
```
To have translucent colors, you have to use RGB color codes (the first three numbers in the background color declaration. The last number, is the transparency/opacity. The closer to 1, the more opaque, the closer to 0, the more transparent.
isabelashdown · Member · Mar 18, 2016 at 6:34 pm
Copy link
That’s wonderful thank you – I played around with the transparency like you suggested to get what I wanted. I wonder if it’s possible to get rid of the red grid lines around the sub menu? It looks a bit out of place as the rest of the theme is quite clean.
thesacredpath · Member · Mar 18, 2016 at 10:09 pm
Copy link
Glad that got you what you wanted. We can use the following CSS to remove the border lines on the drop down menu.
```
.menu-primary .sub-menu, .large-screen .main-navigation ul ul li {
    border: none;
}
```
isabelashdown · Member · Mar 23, 2016 at 6:40 am
Copy link
Perfect! Thank you :)
thesacredpath · Member · Mar 23, 2016 at 7:16 am
Copy link
You are welcome.

No items found.