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
    NOT RESOLVED Posts

  • WP
    Participant

    Hello, Support Team,

     

    Just wonder how to change the navigation bar background color?

     

    Thanks,

     

    Larry

    Shufflehound Support
    Moderator

    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.

    WP
    Participant

    No, I mean that the navigation bar background, which means the background of “Home, etc” button. Not header background!!

    Shufflehound Support
    Moderator

    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.

    WP
    Participant

    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!!

    Shufflehound Support
    Moderator

    The body color gets applied on navigation background color so have you tried using the solution I shared above?

    WP
    Participant

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

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

    Shufflehound Support
    Moderator

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

    WP
    Participant

    http://www.3afuntrip.com/

     

    This is test site.

    Shufflehound Support
    Moderator

    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

    WP
    Participant

    check our site again, and it can be changed into red, but, when we want to change into blue color, it doesn’t work.

    Shufflehound Support
    Moderator

    Please also use the below CSS code.

     

    #header-navigation .sh-nav-container {
    background: transparent !important;
}

    WP
    Participant

    Works, thanks. Also, just wonder how we can make the navigation bar full size?

    Shufflehound Support
    Moderator

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

     

     

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)