Secondary Menu

Tagged: Navigation Bar, padding, space

This topic has 4 replies, 2 voices, and was last updated 10 years, 2 months ago by Michaela.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
September 12, 2014 at 6:57 am #43760

Michaela
Participant

Hi Sakin,

could you please help me with the following two questions about the secondary menu?:
1. How do I change the padding inbetween the menu items (I would like a bigger space between Home-Destinations-Equipment-etc.)

2. When I go to “Equipment”, and then “Camping Gear”, and then “Stove”, I would like that the “Equipment” button in the secondary menu always stays marked (in my case white background, black font) when I’m in that category. How to do this?

This is my website: http://www.travelintense.com [please remove the link once you have replied].

Thanks a lot and regards,
Michaela

September 12, 2014 at 10:08 pm #43794
Sakin
Keymaster
Hi Michaela,

1. You can increase the padding left and right as per your need but you need to careful with small screensize. Here is the following css that will be good for your large screensize, you can add it in “Appearance => Theme Options => Custom CSS” box.
```
@media screen and (min-width: 1153px) {
#secondary-menu ul.menu a {
    padding-left: 35px;
    padding-right: 35px;
}
}
```
2. You can add the following css in “Appearance => Theme Options => Custom CSS” box.
```
#secondary-menu ul.menu .current_page_item a {
    background-color: #fff;
    color: #000;
}
```
Regards,
Sakin
September 15, 2014 at 9:08 pm #43905

Michaela
Participant

Hi Sakin,

thanks for the padding tip, it works on large screens at least (small ones don’t react).
However, the second tip doesn’t work. I would like to be on the following page for example: http://travelintense.com/equipment/camping-gear/stove/. And then the “Equipment” word in the navigation bar above should be highlighted in white (black font). Any other ideas how to achieve this?

Thank you very much!

September 16, 2014 at 12:29 am #43917
Sakin
Keymaster
@Michaela: For menu, you can add the following css in “Appearance => Theme Options => Custom CSS” box.
```
#secondary-menu ul.menu .current-page-ancestor a {
    background-color: #fff;
    color: #000;
}
```
September 16, 2014 at 1:02 am #43925

Michaela
Participant

That was it! Thank you so much!
Author

Posts