Different Background Color for Header, Main and Top Menu

[HappiestWeb]

Hi there,

I want to set different background color for Header, Top Menu and Main Menu. Can you help me how to do this?

Regards
Kamal

[Laura]

Hello, can you share your website link please?

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HappiestWeb]

This is my website http://merabharatmahan.in/

I want to set these background color for top, main and header background

#138808

#000080

#ff9933

Thank you 🙂

[HappiestWeb]

Any update on this?

[Laura]

Hello, here it is: Just add the ones you want to quick css or style.css in child theme.
Top Green

COPY CODE

.social-header.header-color {
background-color: #138808;
}

Hide borders of Top Menu

COPY CODE

.header-color hr, .header-color.container-wrap, .header-color#footer, .header-color#socket, .header-color.social-header, .header-color .top-menu .tabdrop:before, .header-color #top-social .tabdrop:before, .header-color #top-social, .header-color .top-menu > ul, .header-color .kleo-main-header, .header-color .template-page, .header-color .sidebar-right, .header-color .sidebar-left, .header-color .sidebar-extra, .header-color .sidebar-main, .header-color .hr-title, .header-color .nav-tabs, .header-color .nav-pills > li > a, .header-color .kleo-tabs .nav .open > a.dropdown-toggle, .header-color .kleo-tabs .nav .open > a.dropdown-toggle:hover, .header-color .kleo-tabs .nav .open > a.dropdown-toggle:focus, .header-color .kleo-tabs .tabdrop .dropdown-menu, .header-color .dropdown-menu, .header-color #top-social li a, .header-color .top-menu li > a, .header-color .pagination > li > a, .header-color .pagination > li > span, .header-color .callout-blockquote blockquote, .header-color .masonry-listing .post-content, .header-color .list-divider li, .header-color #ajax_search_container, .header-color .form-control, .header-color .feature-item:hover .feature-icon, .header-color .bordered-icons .feature-item.default-icons-size .feature-icon, .header-color .bordered-icons .feature-item.big-icons-size .feature-icon, .header-color input[type="text"], .header-color input[type="password"], .header-color input[type="date"], .header-color input[type="datetime"], .header-color input[type="datetime-local"], .header-color input[type="month"], .header-color input[type="week"], .header-color input[type="email"], .header-color input[type="number"], .header-color input[type="search"], .header-color input[type="tel"], .header-color input[type="time"], .header-color input[type="url"], .header-color textarea, .header-color .activity-timeline, .header-color #buddypress div.item-list-tabs ul li a span, .header-color #buddypress button, .buddypress .header-color a.button, .header-color #buddypress a.button, .header-color #buddypress input[type=submit], .header-color #buddypress input[type=button], .header-color #buddypress input[type=reset], .header-color #buddypress ul.button-nav li a, .header-color #buddypress div.generic-button a, .header-color.bp-full-width-profile div.generic-button a, .header-color #buddypress .comment-reply-link, .header-color #buddypress #whats-new, .header-color #buddypress div.message-search, .header-color #buddypress div.dir-search, .header-color #buddypress .activity-read-more, .header-color #bp-login-widget-submit, .header-color .bbp_widget_login .button.user-submit, .header-color #wp-calendar caption, .header-color .wp-caption, .header-color .widget form#bbp-search-form > div, .header-color .widget_search #searchform > div, .header-color #bp-login-widget-form input[type="text"], .header-color #bp-login-widget-form input[type="password"], .header-color .bbp-login-form input[type="text"], .header-color #buddypress #friend-list .friend-inner-list, .header-color #buddypress #member-list .member-inner-list, .header-color #buddypress #members-list .member-inner-list, .header-color #buddypress #groups-list .group-inner-list, .header-color #buddypress div#item-nav .tabdrop .dropdown-menu, .header-color #buddypress div.profile, .header-color #buddypress #friend-list div.action .generic-button a.send-message, .header-color #buddypress #member-list div.action .generic-button a.send-message, .header-color #buddypress #members-list div.action .generic-button a.send-message, .header-color #buddypress form.standard-form .left-menu img.avatar, .header-color .checkbox-mark, .header-color #buddypress div#group-create-tabs ul li.current a, .header-color .rtmedia-container #rtMedia-queue-list tr td, .header-color #buddypress .standard-form textarea, .header-color #buddypress .standard-form input[type=text], .header-color #buddypress .standard-form input[type=color], .header-color #buddypress .standard-form input[type=date], .header-color #buddypress .standard-form input[type=datetime], .header-color #buddypress .standard-form input[type=datetime-local], .header-color #buddypress .standard-form input[type=email], .header-color #buddypress .standard-form input[type=month], .header-color #buddypress .standard-form input[type=number], .header-color #buddypress .standard-form input[type=range], .header-color #buddypress .standard-form input[type=search], .header-color #buddypress .standard-form input[type=tel], .header-color #buddypress .standard-form input[type=time], .header-color #buddypress .standard-form input[type=url], .header-color #buddypress .standard-form input[type=week], .header-color #buddypress .standard-form select, .header-color #buddypress .standard-form input[type=password], .header-color #buddypress .dir-search input[type=search], .header-color #buddypress .dir-search input[type=text], .header-color .bbp-pagination-links a, .header-color .bbp-pagination-links span, .header-color #bbpress-forums li.bbp-body ul.forum, .header-color #bbpress-forums li.bbp-body ul.topic, .header-color form#new-post, .header-color #bbpress-forums .bbp-form input[type="text"], .header-color .quicktags-toolbar, .header-color .wp_themeSkin tr.mceFirst td.mceToolbar, .header-color .quicktags-toolbar input, .header-color .wp-editor-area, .header-color .rtmedia-container .rtmedia_next_prev a, .header-color .rtmedia-activity-container .rtmedia_next_prev a, .header-color #buddypress div.rtmedia-activity-container .rtmedia_next_prev a, .header-color #rtm-gallery-title-container #rtm-media-options, .header-color #rtMedia-upload-button, .header-color #buddypress #item-body .rtmedia-item-comments .rt_media_comment_form textarea, .header-color .rtmedia-container .rtmedia-editor-main dl.tabs dd > a, .header-color .rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .header-color #buddypress div.rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .header-color .rtmedia-container .imgedit-wrap div.imgedit-settings .imgedit-group, .header-color #buddypress .rtmedia-container textarea, .header-color #buddypress .rtmedia-container input[type=text], .header-color #buddypress .rtmedia-container input[type=text], .header-color #buddypress .rtmedia-container input[type=color], .header-color #buddypress .rtmedia-container input[type=date], .header-color #buddypress .rtmedia-container input[type=datetime], .header-color #buddypress .rtmedia-container input[type=datetime-local], .header-color #buddypress .rtmedia-container input[type=email], .header-color #buddypress .rtmedia-container input[type=month], .header-color #buddypress .rtmedia-container input[type=number], .header-color #buddypress .rtmedia-container input[type=range], .header-color #buddypress .rtmedia-container input[type=search], .header-color #buddypress .rtmedia-container input[type=tel], .header-color #buddypress .rtmedia-container input[type=time], .header-color #buddypress .rtmedia-container input[type=url], .header-color #buddypress .rtmedia-container input[type=week], .header-color #buddypress .rtmedia-container select, .header-color #buddypress .rtmedia-container input[type=password], .header-color .kleo-toggle-menu .kleo-toggle-submenu, .header-color .kleo-toggle-menu a.remove, .header-color .woocommerce .kleo-cart-totals .totals-wrap, .header-color #articles-dir-list article.article-container {
border-color: transparent;
}

Top Menu Icon Colors and Text White

COPY CODE

.icon-twitter:before {
content: '\e967';
color: white;
}
.icon-facebook:before {
content: '\e94e';
color: white;
}
.icon-linkedin:before {
content: '\e95c';
color: white;
}
.icon-gplus:before {
content: '\e957';
color: white;
}
.icon-youtube:before {
content: '\e96d';
color: white;
}
.icon-pinterest-circled:before {
content: '\e95e';
color: white;
}
.header-color .top-menu li > a, .header-color #top-social li a {
color: white;
}

Header Orange

COPY CODE

.page-boxed, .kleo-navbar-fixed .page-boxed .kleo-main-header, .kleo-navbar-fixed.navbar-transparent .page-boxed #header {
max-width: 1200px;
background-color: #ff9933;
}

Main Menu Blue

COPY CODE

.js .navbar-resize .navbar-nav {
padding-top: inherit;
background-color: #000080;
width: 1200px;
margin-left: -1.3%;
}

Main Menu Text White

COPY CODE

.icon-home:before {
content: '\e835';
color: white;
padding-left: 20px;
padding-right: 20px;
}
.kleo-main-header.header-left:not(.header-scrolled) .navbar-collapse>ul>li>a {
line-height: 88px!important;
color: white;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sandervm86]

@Laura how do you change the arrow colors?

as you can see on http://www.receptenmaker.nl its hard to see them 🙂

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, here it is:

COPY CODE

.caret:after {
  color: black !important;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sandervm86]

Tnx alot! trying it out.

[Laura]

Hello, if you felt happy with the attention you received please rate us with 5 stars at ThemeForest 🙂 ( Download section of your account )

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:

You must be logged in to view attached files.

[Author]

Posts