Spacing between menu items

How do I create more spacing between the menu items?


  • Hi,

    you can do it using below css:
    #Top_bar .menu > li > a span:not(.description) { padding: 0 40px !important; }
  • Great thanks.  Is there anyway to have the on mouse highlight below the text instead of above?
  • It is possible only with below css:
    #Top_bar .menu > li:hover > a:after { top: 56px !important; }
  • Thanks for providing the css for the bar to be below the menu link during the on mouse highlight.  Please click here:

    How can I get it so that the bar is always below menu items?  I'd also like to colour the menu item bars different too?  Please help.
  • It is not possible to show bar below menu. This is technically not possible with this theme.

    But please explain what kind of color you want to change for menu items - background, font or what exactly?
  • But how come the menu bars are shown below when the menu is sticky and still shows up half-way down the page

    Additionally, if you're able to show the bar below the menu when the mouse is over as per the css above, doesn't that indicate that it's possible to always have the bar below?

    I still want the menu to be white as it currently is.  I would like the bars for the menu items to always be showing as #afb9d5, then the would be highlighted as is by the darker purple colour for an on mouse effect.  Any help with the css would be much appreciated!
  • Also, is it possible to centre the whole menu?
  • Menu can be centered only with Stack: Center header layout and more info about that you find at

    As we wrote above, action bar can`t be placed under menu. This bar can be visible only under (we talk about bar with phone number and social icons).

    But we still don`t understand what color you want to change in menu as you did not write. Do you mean font color or background for menu items on hover? Please explain.
  • Great, thanks for the direction to centre the menu.  Now that I've centred the menu, is there a way I can bring the logo back to the left hand side?

    Okay, understood about the action bars below the menu.  As for the colour change, I would like the action bars to be visible for all menu pages, but to be a different colour.  For simplicity, I would like all the action bars for each menu item to be #fff000 currently, then when the mouse is on the menu item, the action bar changes colour.  Currently the action bar is only visible for one item or when you have a mouse over.  Does that clarify my request?
  • edited October 2014
    To get logo back to left side, please use below css:
    .header-stack.header-center #Top_bar .logo { text-align: left !important; }
    But the thing with "action bars" is not clear for us as action bar is only one on website and is visible on all pages so probably we do not talk about the same thing. Please make a screenshot of what you mean with explanation on it and we`ll see what we can do for you.
  • Thanks for providing the logo adjustment.

    Here's what I'm looking for with the action bars.  Essentially I want each item to always show an action bar, but a different colour, unless it is an on mouse condition.  Here's a jpg describing the current condition, and what I would like:
  • Just as we thought. The thing you talk about is not action bar but just :after thing for menu item. That`s why we did not understand what you talk about but now we see. Unfortunately it is not possible to do what you need. This small stripe under menu item can be only on hover or active item. It is not possible to add it for all items as you want.

    Thanks for understanding!
  • No problem.  Your centre menu fix provided here:

    Giving the css of below, messes up the menu when scrolling further down the page.  How do I fix this?
    #Header .menu > li { display: inline-block; float: none;}
    #Top_bar .menu_wrapper { text-align: center; width: 100%; }
    #Top_bar .top_bar_left { width: 100% !important; }
    .header-stack #Top_bar .top_bar_right { display: none; }
  • See and scroll down the page, the menu links are way off.
  • Please try below css for that: .menu > li:not(.mfn-megamenu-parent) { top: -170px; }
Sign In or Register to comment.