Archived topic
Vertical menu items width
5 replies · Started by Aleksandar on September 9, 2018
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?
Hi there,
can you share a link?
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.
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.
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!
Awesome. Glad i could be of help :)
