Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 10, 2014 at 4:52 pm #277020
    frankwelschlehmann

    The clients menu items were so long that we had to format the menu into 2-lines using <br /> tags.
    see http://www.members.diplomatic-council.org/ (passwd “Hang”)

    Can you pls help with the CSS needed to format the first-line menu-itens into slightly larger boxes where the 2 lines are closer together?

    Thanks,
    Frank

    June 10, 2014 at 7:11 pm #277091
    Yigit

    Hi frankwelschlehmann!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #top .main_menu ul:first-child > li > a {
padding: 0 10px;
}

    Best regards,
    Yigit

    June 10, 2014 at 7:51 pm #277117
    frankwelschlehmann

    Hmm, sorry, but this did not quite fix it.

    June 10, 2014 at 8:35 pm #277158
    Yigit

    Hi!

    Please flush browser cache and refresh your page a few times. It does work fine on my end. Just to make sure that we are on the same page, you would like to decrease the padding between main menu items, is that correct?

    Cheers!
    Yigit

    June 10, 2014 at 10:46 pm #277237
    frankwelschlehmann

    Thank you for the friendly reminder.

    I am replacing a site where the menu looks like this:
    https://www.evernote.com/shard/s74/sh/961a036b-32ca-47b2-af1b-8c619897bdb0/a22ce883e23eb478ffd17ee31d44a251

    and right now the menu on the new site looks like this:
    https://www.evernote.com/shard/s74/sh/a3fa5268-2228-43ef-a240-e2112eb26908/3e98145c6941834c619d16c0b278b31f

    It is not the blue background I am after, but the 2-lines close to each other in one block.

    Thank you!!
    Frank

    June 11, 2014 at 4:55 am #277356
    Ismael

    Hey!

    Thank you for the update.

    Please remove the br tag then use this on Quick CSS or custom.css to decrease the padding between menu items:

    .av-main-nav > li > a {
padding: 0 7px;
}

    Adjust the second value on the padding property if necessary.

    Cheers!
    Ismael

    June 11, 2014 at 9:14 am #277442
    frankwelschlehmann

    Thank you Ismael,
    this now results in all menu-items in one line. Which is ok, but not what I need in this case.
    All menu items should be 2-line items, where the 2 lines are quite close, and both fit in the first menu item ‘box’.

    But I fully understand if these design issues are not really your problem.
    Your theme works perfectly and this really is not a support problem.

    Again, thank you!
    Frank

    June 11, 2014 at 3:07 pm #277549
    Yigit

    Hey!

    After making menu items 2 lines, please add following code to Quick CSS

    #header_main_alternate { height: 70px; }

    Best regards,
    Yigit

    June 11, 2014 at 3:14 pm #277553
    frankwelschlehmann

    Yeah! Getting there.

    Only now
    a) the menu overlaps the first banner image
    b) the 2-lines need to get closer, i.e. reduce spacing

    Grrreat!!!

    Regards,
    Frank

    June 11, 2014 at 3:57 pm #277566
    Yigit

    Hi!

    Please add following code as well

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a { line-height: 22px !important; }
#zenbox_tab { top: 45%; }

    Regards,
    Yigit

    June 11, 2014 at 10:21 pm #277747
    frankwelschlehmann

    Thank you. After some tweaking of the values I am happy now.

    Gentlemen, were can I buy you a drink?!

    Very best regards,
    Frank

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘2-line menu needs some CSS styling’ is closed to new replies.