[Resolved] Vertical menu items width

Home Forums Support [Resolved] Vertical menu items width

Home Forums Support Vertical menu items width

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #672333
    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
    #672395
    David
    Staff
    Customer Support

    Hi there,

    can you share a link?

    #672700
    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.

    #672820
    David
    Staff
    Customer Support

    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.

    #672954
    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!

    #673092
    David
    Staff
    Customer Support

    Awesome. Glad i could be of help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.