Okay
  Public Ticket #1783448
Header and Nav bar colour
Closed

Comments

  • George started the conversation
    November 14, 2018 at 1:50pm

    Hi,

    I would like to change the background colour of the header and the top menu to black (to match my logo) with orange text and orange social media icons.

    Thanks in advance.

  •  1,692
    Andrey replied
    November 14, 2018 at 3:32pm

    Hello, Dear George!

    In order to perform your request, please click WP Dashboard => Appearance => Customize => Additional CSS and paste this code here:

    .ls .nav > li > a {
    color: #e08641;
}
.darklinks a.social-icon {
    color: #e08641;
    border-color: #e08641;
}
.sf-menu > li > a:hover {
    color: #efb587;
    border-color: #efb587;
}
.page_topline {   
    background-color: #231f20;
}
.page_header {
    background-color: #231f20;
}

    Then save changes and you will receive this result: http://prntscr.com/libmq3

    Also if you want to rid off white line between header and menu, add in Additional CSS this code:

    .with_top_border:before, .with_bottom_border:after {    
    background-color: #231f20;
}

    Best Regards!

  • George replied
    November 14, 2018 at 8:02pm

    Hello Andrey,

    Thank you so much for your fast response! That looks great.

    Is there any way that the "look for staff?" button can be white before you hover over it? (but still keeping it orange when you do hover over it).

    Thanks again in advance.

    George

  •  1,692
    Andrey replied
    November 15, 2018 at 9:53am

    Hello, Dear George!

    In this case you may try this css code:

    .ls.page_topline .theme_button.inverse.color1 {
    color: #ffffff;
    background-color: #e08641;    
}
.ls.page_topline .theme_button.inverse.color1:hover, .ls.page_topline .theme_button.inverse.color1:focus, .ls.page_topline .theme_button.inverse.color1:active {
    color: #ffffff;
    background-color: #efb587;
    border-color: #efb587;    
}

    We hope that you''ll like it.

    Best Regards!

  • George replied
    December 11, 2018 at 3:38pm

    Hello Andrey,

    Thank you for your help so far. 

    Would it be possible to change to colour of the menu bar on the mobile version of the website (orange to match the rest of the site). It's currently a dark blue that can't be seen?

    Also is it possible to duplicate the "looking for staff" button in the header? So that there are 2 (ideally the second one one be below the existing one).

    Thanks for your time

    George

  •  1,692
    Andrey replied
    December 11, 2018 at 5:14pm

    Hello, Dear George!

    In this case please click WP Dashboard => Appearance => Customize => Additional CSS and paste this code here:

    @media (max-width: 991px) {
.toggle_menu {
    display: block;
    background: rgba(224, 134, 65, 1);
    cursor: pointer;    
    }
} 
@media (max-width: 991px) {
.ls .toggle_menu span, .header_white .toggle_menu span, .ls .toggle_menu span:before, .header_white .toggle_menu span:before, .ls .toggle_menu span:after, .header_white .toggle_menu span:after {
    background-color: #0055ff;
    }
}

    Then save changes and you will receive this result: http://prntscr.com/ltn4vv

    Play around the values of color:

    rgba(224, 134, 65, 1);

    #0055ff;

    And apply changes.

    Best Regards!