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.
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!
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?
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.
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.
Comments
you can do it using below css:
#Top_bar .menu > li > a span:not(.description) { padding: 0 40px !important; }#Top_bar .menu > li:hover > a:after { top: 56px !important; }But please explain what kind of color you want to change for menu items - background, font or what exactly?
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.
.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 understanding!
#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; }
#Top_bar.is-sticky .menu > li:not(.mfn-megamenu-parent) { top: -170px; }