[raoul_k@hotmail.co.uk]

Hey,

I want to add a horizontal menu similar to the main navigation bar at the top but to some pages only i.e. I just want this custom menu to show on a few pages where I’ve added it using WP Bakery, not my whole site.

I created a menu called ‘my-awesome-menu’ and added the below custom CSS

.my-awesome-menu li {
display: inline; !important
background-color: #eeeeee
}

I also tried with display: inline-block, but neither worked. Do you know how I can cause the menu to display horizontally across a page?

Thanks

[raoul_k@hotmail.co.uk]

Sorry in addition to this, can you explain how to customise the font-size of the menu labels? I have added the CSS below but the font-size parameter only changes the gaps between the labels rather than the label font size itself. How can I change the size of the label text? Thanks again!

.my-awesome-menu li {
display: inline; !important;
font-size: 20px !important;
background-color: #eeeeee
}

[Althemist]

Hi raoul_k@hotmail.co.uk,

I am not really sure what do you mean. Where would you like to display that menu? And how do you place it in the page? Where in the page exactly?

Please, explain more. Right now everything is just so out of context that we simply can’t understand. Also, providing a link where we can see how it looks now and what do you want to achieve will help a lot.

[raoul_k@hotmail.co.uk]

OK sure, let me provide more context.

I want to customise this page https://histreetdelivery.com/fish-fresh-fish/. You’ll see there is a vertical menu with labels ‘Fresh Fish, ‘Shellfish’, ‘Fishcakes, Breaded & Pies’ and ‘Ready to Eat Seafood’.

I would like this menu to be horizontal across the page rather than vertical. I would also like to make the label font size larger. See this image for what I want it to look like

I’ve tried the CSS in my previous post but it still does not display the menu inline. Is there a way I can change the menu to be horizontal?

Thanks again

[Althemist]

Well, that’s not theme related. It’s how widgets are displayed. However, it’s doable with the right CSS rules.

You can start from here and adjust as per your needs:

.menu-all-fish-products-container ul li {
    display: inline-block;
    width: auto !important;
    padding: 0 12px !important;
}
.menu-all-fish-products-container ul li a {
    font-size: 18px !important;
}

[Author]

Posts