[Resolved] expand the menu

[guillermochico]

Hi, I would like to expand the menu (view image). Thanks 😉

[bdbrown]

Hi Guillermo. It appears that your image didn’t get inserted. Can you post a link? Thanks.

[guillermochico]

http://s2.subirimagenes.com/privadas/previo/thump_2336822menu.png
The web is in maintenance mode. Sorry

[Tom]

Are you wanting to make the sub-menu wider?

If so, this CSS should do it:

.main-navigation ul ul {
    width: 200px;
}

Adjust the px as needed.

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

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

[guillermochico]

Thanks! 🙂

—

Yes, Please.

[Tom]

Did the above CSS work for you? 🙂

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

[guillermochico]

Yes! 😉
I want to make the sub-menu wider. Thanks

[Tom]

Glad it worked 🙂

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

[guillermochico]

Tom, Help me with please.
How to identify the name of the menu and other possible changes css?

there somehow?
do not ask for much

😉

[bdbrown]

Hi Guillermo. You would use a tool like Firebug in Firefox or Google Developer Tools in Chrome. Right-click on your page on, for example, the menu. Then select “Inspect element” from the pop-up menu. This will open a window at the bottom of your display with the related line of HTML code highlighted. For each element you can see the assigned ID (id=””) and Class (class=””) names. When used in CSS, element IDs are prefixed with a pound sign (#); classes are prefixed with a dot (.).

[Tom]

Great explanation @bdbrown 🙂

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

[guillermochico]

bdbrown Thanks!

not work, you can help me please? 🙂

.sub-menu ul ul {
width: 250px;
}

[bdbrown]

Each menu level below the main menu has a class of “sub-menu”. This means that your code won’t be applied because the class of “.sub-menu” would apply to every level; there wouldn’t be any “ul” elements without that class. The code Tom posted above will target the 1st level of submenu items. Are you trying to change something else?

[guillermochico]

I want change 2st level of submenu items. Thanks.

[bdbrown]

Then you would add another ul level:

.main-navigation ul ul ul {
    width: 200px;
}

[Author]

Posts