[Resolved] Vertical menu items width

[Aleksandar]

Hi,

I’m looking for some assistance regarding the issue that I have with the main menu setup.
Following designer’s request, overall page design is fairly simple – in consists of left sidebar (where the vertical main menu is located), and the content area to the right.
Now, the thing which I just can’t get to work is different width for the individual menu items (links). Original idea is shown here – https://ibb.co/cHg8Ep

Is there an easy css solution, or it involves some heavy JS changes/coding, or it’s not possible at all?

GeneratePress 2.1.4

[David]

Hi there,

can you share a link?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Aleksandar]

Hi David,

sure I can provide link, here it is
http://proba10.000webhostapp.com

but nothing much done regarding the menu, it’s pretty much out of box setting, except for the menu item colors, where I’ve tried some options.

[David]

So you can add this CSS:

.main-navigation .main-nav ul li a, .main-navigation .main-nav ul ul li a {
    display: inline-block;
    float: right;
}

Then you can set the colors in the customiser, by making the navigation background color transparent you will only see the menu item colors.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Aleksandar]

Hi David,

that is an excellent suggestion, it did work out for the menu items which now have “uneven width” just as planned.
But as I implemented that line, something happened to the structure of the menu which is now not “falling down” properly along the left sidebar. Please just refresh that link and take a look

*** EDIT ***

Never mind, I think I’ve got it right and everything is in place now, here’s the css:

.main-navigation .main-nav ul li a, .main-navigation .main-nav ul ul li a {
display: inline-block;
}

.nav-aligned-right .main-navigation ul {
float: right;
text-align: right;
}

***

Once again, thanks for the resolution, great support and keep up the good work!

[David]

Awesome. Glad i could be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts