Spacing between menu items

http://oakvillecounselling.com/01oc/

How do I create more spacing between the menu items?

Comments

  • 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: http://oakvillecounselling.com/01oc/

    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 http://forum.muffingroup.com/betheme/discussion/170/any-suggestion-how-to-center-menu-using-stack-center

    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: http://forum.muffingroup.com/betheme/discussion/170/any-suggestion-how-to-center-menu-using-stack-center

    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 http://oakvillecounselling.com/01oc/ and scroll down the page, the menu links are way off.
  • Please try below css for that:
    #Top_bar.is-sticky .menu > li:not(.mfn-megamenu-parent) { top: -170px; }
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.