How to change the navigation bar background color?

Home Forums Jevelin Theme How to change the navigation bar background color?

Home Forums Jevelin Theme How to change the navigation bar background color?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • 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

    Attachments:
    You must be logged in to view attached files.

    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.

    Attachments:
    You must be logged in to view attached files.

    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?

    No, all were messed up, and see the attached screen shot!!!

    Attachments:
    You must be logged in to view attached files.

    Could you please share me your site URL where it’s displaying so that i can help you?

    http://www.3afuntrip.com/

     

    This is test site.

    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;
    }

     

     

Viewing 14 posts - 1 through 14 (of 14 total)