Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #451396

    Hi,

    how can I reduce the space between menu items to get all again in one row? for details see https://miApple.me and this screenshot:
    https://www.evernote.com/l/APsvBob2rhlHvID1AfOiVd_2MagVUinQUcM

    cheers,
    Gee Are

    #451655

    Hi Gee Are!

    We could try some CSS out, or would you rather display the mobile menu on a larger screen size? For instance 1024px down.

    Cheers!
    Rikard

    #451695

    Hi Rikard,

    CSS would be preferred!

    Cheers
    Gee Are

    #451703

    Hi!

    Please add following code to Quick CSS

    @media only screen and (max-width: 1060px) {
    #top .av_seperator_big_border#header .av-main-nav > li > a {
      padding: 0px 1px;
    }
    .av_seperator_big_border .av-main-nav > li > a {
      min-width: 80px;
    }
    #header_main_alternate .container { 
    padding: 0; }}

    Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px.
    Best regards,
    Yigit

    #451825

    Hi Yigit,

    thank you very much for your quick response! It works.

    Is there a way to get the space for a single item automatically adapted on the menu word’s length because actually all menu items have the same size regardless of the word’s length.

    Cheers,
    Gee Are

    #452038

    Hi!

    I don’t think there is an easy war to do this. You would need to do it manually for each menu item. For example:

    li#menu-item-8433 {
    width: 65px;
    }
    li#menu-item-8673 {
    width: 96px;
    }
    li#menu-item-8431 {
    width: 63px;
    }
    

    and so on.

    I suggest it’s best to hire a freelancer for this job.

    Cheers!
    Andy

    #452093

    Hi Andy,

    thanks for your reply.

    However, I think I do not need a freelancer. It worked some time ago, I found it somewhere here in the enfold forum. But I lost the code and couldn’t find it anymore… Maybe one of the other guys here have an idea?

    Cheers,
    Gee Are

    #452109

    Hello,

    That’s not possible within CSS boundaries, min-width sets a minimum width to the element and can not read the box width of this, you’d either have to rely on menu-id targeting or use padding instead (as it is by default):

    #top .av_seperator_big_border#header .av-main-nav > li > a {
      padding: 0 13px;
    }

    Alternatively you could set a percentage width to the nav items so they spread throughout the menu container equally, like

    #top .av_seperator_big_border#header .av-main-nav > li{
        width: 10%; /* change this in case of more/less menu items */
    }
    #top .av_seperator_big_border#header .av-main-nav > li > a {
        padding: 0;
    }

    Regards,
    Josue

    #452253

    Hi Josue,

    thanks for the explanation and the alternate option. I think Yigit’s code fits best for me.

    Ticket can be closed. Thanks to all of you!

    Cheers,
    Gee Are

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How to decrease space between menu items’ is closed to new replies.