Different styles for top and main menu

[lappanion]

Hi there,

I can’t figure out how to add different colours for top (the social menu) and main menu in Kleo.

Cant find in in theme options..

Thanks 🙂

[Roger]

same here.. i would like the top menu to be one color, with bigger fonts, and the main menu a different color

[lappanion]

^ welcome to the thread lol…

[Kamal]

Hi,
It is possible to change the background color and the text color of both menu easily. You should can achieve your desire result in the following ways.
1. You can change the link color and the menu background color for both main nav menu and top menu from the Theme option>Style Option>header. I have added a screenshot. You can get clear understanding seeing it.
2. To give top menu different color for text and its background. You need to add some css to the style.css file of the KLEO child theme which can be found Under Appearance>Editor>style.css. I have got some css code for you to change top menu color. You can change the color code to your taste. Please copy the following code

COPY CODE

/*
Custom Style for Top Menu STARTS
*/
.social-header.header-color {
background-color: #d0820d !important;/*Color for background  on the top menu area*/
color:#fff !important;/*Color for any text/toggle button on the top menu area*/
border: 0;
}
.social-header.header-color a{
	color: #fff !important; /*Color for the link of the menu on the top menu area*/
}
/*
ENDS Custom Style for Top Menu
*/

to Apearance>Editor>style.css and save the file. Refresh the browser. and see the result. and you can also clear the browser cache and cookies etc. to see the result. I have added a screenshot of the result after adding the code. You can have an idea looking at the screenshot.
Thanks,
Kamal

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Attachments:

You must be logged in to view attached files.

[lappanion]

Really cool Kamal! It works 🙂

Where can I adjust the height of the main menu bar?

Thanks!

[Kamal]

Hi,
Can you please tell me more clearly what you meant? There are two menu on top of the page. One is called main nav menu and another is called top menu. Items on top menu have a right vertical border/bar on each. and if you meant this border, then you can adjust the height of that bar using the following code. you can add them to Appearance>editor>style.css like before.

COPY CODE

.top-menu li > a {
    line-height: 33px !important; /*Change the value to adjust to your need*/
}

However, if you meant something else, then please tell me with more details. I will try to help you instantly.
Thanks,
Kamal

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lappanion]

Thanks Kamal, I meant the second one (the one where the logo would go)…

But I am interested in changing the font and border colours in the top menu as well..

🙂

[Kamal]

Hi,
You can change the font and border color of the top menu with the following code. Please read the comment in the code to edit them to according to your need.

COPY CODE

/*
Custom Style for Menu STARTS
*/
.social-header.header-color {
  background-color: #805920 !important;/*Cange it for Color for background  on the top menu area*/
  color:#ECFF42 !important;/*Change it for Color for general text or icon on the top menu area*/
  border: 0;
}
.social-header.header-color a{
	color: #ECFF42 !important; /* Change it for Color for the link of the menu and icon on the top menu area*/
}

.top-menu li > a {
    border-color: green !important; /*change it for color of border of top menu*/
}

#top-social li a {
   border-color: green !important; /*change it for the color of border of top social icons*/
}

/*
 ENDS Custom Style for Menu
 */

and you can use the following code to increase the height of the main nav menu. you can adjust the value of margin to your desired size.

COPY CODE

/*change the height of the main nav menu*/
.kleo-main-header .container {
    margin-bottom: 20px;
    margin-top: 20px;
}
/*Removing extra margin if sticky menu is enabled*/
.kleo-main-header.header-scrolled .container {
    margin-bottom: 5px;
    margin-top: 5px;
}

If you do not understand anything, Please ask me anytime.
Regards,
Kamal

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rweiss]

Edit: duplicate question. See here: https://archived.seventhqueen.com/forums/topic/change-style-of-main-menu

[lappanion]

Hi there, for some reason the code no longer works. It worked great before but now when I try to change the colours nothing happen. Any idea what could be causing this?

[Abe]

@lappanion put your code here and a link to your site to see how you are adding it

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts