How to change the colour of the MENU TOP BAR?

sujai_chand · June 2016

Hi,

How to change the colour of the MENU TOP BAR? http://demo.oddcounts.com/c84/index.php/home/cube-demo/

Currently, its WHITE (Transparent) in colour. But I wanted to change the colour to BLACK (Transparent).

Also, I want to reduce the height of the top bar.

Please suggest me a way.

Thanks

Albert · June 2016

Hi,

to change top bar background color and make it lower, you need to use the following css:

.header-plain #Top_bar { background: #000 !important; }
#Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo { padding: 0 !important; }
.header-plain #Top_bar a#header_cart, .header-plain #Top_bar a#search_button, .header-plain #Top_bar .wpml-languages, .header-plain #Top_bar a.button.action_button { line-height: 60px !important; }
.header-plain:not(.menu-highlight) #Top_bar .menu > li > a span:not(.description) { line-height: 60px !important; }
#Top_bar .top_bar_right, .header-plain #Top_bar .top_bar_right { height: 60px !important; }

sujai_chand · June 2016

1) If I change background to BLACK, How to change the color of the texts inside the Top bar to"WHITE colour"?

2) The CTA button is not properly aligned when I tried a different style for the TOP BAR such as Classic, Transparent, Stack: Center etc. (Other than PLAIN style). How to make the CTA button properly aligned within the TOP BAR

REFER LINK: http://demo.oddcounts.com/c84/index.php/home/cube-demo/# ( Please scroll and check the top bar)

Apprecitae your time. Look forward to hearing from you.

Albert · June 2016

1. You can change them under Theme options > Colors > Menu & Action Bar section.
2. If you mean sticky header, please use:

#Top_bar.is-sticky a.button.action_button { top: -5px !important; }

sujai_chand · June 2016

Cool, its working fine

BTW, How to change the colour of MENS such as Salesforce services, Packages, Project, Company etc into white color. Plz refer http://demo.oddcounts.com/c84/index.php/home/cube-demo/#.

Also, I want to remove the " white colour highlighter" when we hover over the MENUS.

Looking for your suggestion.

Albert · June 2016

You can achieve this with the following css:

.header-plain #Top_bar .menu > li > a span:not(.description) { color: #FFF !important; }
.header-plain #Top_bar .menu > li.current-menu-item > a, .header-plain #Top_bar .menu > li.current_page_item > a, .header-plain #Top_bar .menu > li.current-menu-parent > a, .header-plain #Top_bar .menu > li.current-page-parent > a, .header-plain #Top_bar .menu > li.current-menu-ancestor > a, .header-plain #Top_bar .menu > li.current-page-ancestor > a, .header-plain #Top_bar .menu > li.current_page_ancestor > a, .header-plain #Top_bar .menu > li.hover > a, .header-plain #Top_bar a#header_cart:hover, .header-plain #Top_bar a#search_button:hover, .header-plain #Top_bar .wpml-languages:hover, .header-plain #Top_bar .wpml-languages ul.wpml-lang-dropdown { background: transparent !important; }

sujai_chand · June 2016

Wow its working great!.

1. Any suggestions to remove the divider gray line between the MENU names and boarder on the TOP bar.

2. Also, CSS for making the top bar transparent is appreciable.

Thanks

Albert · June 2016

1. To remove border, please use:

.header-plain #Top_bar .menu > li:first-child > a span:not(.description) { border-left-width: 0 !important; }
#Top_bar .menu > li > a span:not(.description) { border: 0 !important; }
.header-plain #Top_bar { border: 0 !important; }

2. It's not possible to make top bar transparent. To make header transparent, you need to do this under Theme options > Global > General section.

sujai_chand · June 2016

Awsome! Its working. Thanks a ton.=D>

BTW, I need a clarification. whats the difference between Header and Top Bar here http://demo.oddcounts.com/c84/index.php/home/cube-demo/

Albert · June 2016

Header - it's Action Bar, Top Bar and the slider all together. But the top bar is just the section where the logo and menu are.

sujai_chand · June 2016

@-) thanks for the clarification

sujai_chand · June 2016

Hi,

Now top bar looks cool. Only thing missing is highlighting the MENU ITEMS with theme color when some one hover over the MENU ITEMS.

My website: http://demo.oddcounts.com/c84/index.php/home/cube-demo/

Reference website : http://www.the3i.com/

Help me out?

Albert · June 2016

To highlight menu items on hover, please use:

#Header #Top_bar .menu > li > a:hover > span { color: #000 !important; }

How to change the colour of the MENU TOP BAR?

Comments