Home › Forums › Jevelin Theme › How to change the navigation bar background color?
Home › Forums › Jevelin Theme › How to change the navigation bar background color?
Hello, Support Team,
Just wonder how to change the navigation bar background color?
Thanks,
Larry
Hi Larry,
I hope you are well today and thank you for your question.
You can change it from theme styling settings as shown in the attached screenshots.
Best regards,
Shufflehound team
No, I mean that the navigation bar background, which means the background of “Home, etc” button. Not header background!!
You can change it by changing body background color as shown in the attached screenshot.
Navigation bar is:
<ul id=”menu-menu-1″ class=”sh-nav sh-nav-left sf-js-enabled”>
<li id=”menu-item-5″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-5″>Home
<li id=”menu-item-2813″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-2813″>Categories
<li id=”menu-item-2810″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-2810″>Products
<li id=”menu-item-2811″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-2811″>Subscribe
<li id=”menu-item-2809″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-2809″>Partners
<li id=”menu-item-2773″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2773″>Shop
<li id=”menu-item-2812″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-2812″>Shipment
It is not body!!
The body color gets applied on navigation background color so have you tried using the solution I shared above?
Could you please share me your site URL where it’s displaying so that i can help you?
Please reset the above shared color and add the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-header .container { background-color: #f75e5e; }
You can change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
check our site again, and it can be changed into red, but, when we want to change into blue color, it doesn’t work.
Please also use the below CSS code.
#header-navigation .sh-nav-container { background: transparent !important; }
Works, thanks. Also, just wonder how we can make the navigation bar full size?
You can make the navigation bar full size by using the following CSS code.
#page-container .sh-header .container { width: 100% !important; max-width: 100% !important; }