[Resolved] How To Display A Custom Menu Horizontally

[Yomi]

Hi Tom,

I need some help again with my custom menu. I have tried everything I know but just can’t get it to display the way i want it… I believe it is a css issue

What I want To Achieve:

I want to display a “custom menu” in the “above post widget area” that I have created. I want the menu to display horizontally!!

Below is an image of what I am trying to achieve

What I want To achieve

Below is what I have been able to achieve so far

What I have been able to achieve so far

This is what I have done so far

I created a widget area to display in the “before post area” (see the codes I used below)

This is what I have done so far

then I created a custom menu and placed a custom menu widget in the widget area

Image of widget area

I have tried every css i know but just can’t get it to work

I tried the one below which worked but it also affected the main primary menu

.menu li {
display: inline-block;
margin-bottom: 15px;
padding: 10px;
background-color: #eeeeee
}

Please help!!!!

[Tom]

Hi there,

This is more a question for https://wordpress.org/support/ or http://wordpress.stackexchange.com/ as it doesn’t directly relate to GP.

When you register your widget, you have <div> in the “before_widget” parameter.

Change that to something like <div class="my-awesome-widget">.

Then you can do this:

.my-awesome-widget li {
    display: inline-block;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #eeeeee
}

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Yomi]

Excellent!!

Works perfectly as I want it now

Thanks,

I am sure something like this will be of help to other users who want to add additional menu spaces or widget spaces on to the generatepress theme

Just a point of suggestion…. Might be a good idea to create a special add on like that of the plugin “widgets on pages” would increase the flexibility of this powerful theme.

Thanks very much for the help… much appreciated

Kind regards

[Tom]

Glad I could help! I agree that this will be useful to other users 🙂

• This reply was modified 6 years, 9 months ago by Tom.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Thanks, it was useful to me!

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Darryl]

Was absolutely help! Thanks Guys!

[Author]

Posts