Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 28, 2015 at 7:46 pm #451396
    Gee Are Pabst

    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

    May 29, 2015 at 3:42 pm #451655
    Rikard

    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

    May 29, 2015 at 4:46 pm #451695
    Gee Are Pabst

    Hi Rikard,

    CSS would be preferred!

    Cheers
    Gee Are

    May 29, 2015 at 4:55 pm #451703
    Yigit

    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

    May 29, 2015 at 10:01 pm #451825
    Gee Are Pabst

    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

    May 30, 2015 at 4:00 pm #452038
    Andy

    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

    May 30, 2015 at 11:55 pm #452093
    Gee Are Pabst

    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

    May 31, 2015 at 3:56 am #452109
    Josue

    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

    May 31, 2015 at 4:30 pm #452253
    Gee Are Pabst

    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

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