Sticky menu - colours

Comments

• Phil

  October 2021

  Hello,

  Please, go to Betheme -> Theme options -> Header & Subheader -> Header, scroll down to the Sticky header options, and change the style to White.

  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mrmzalewski

  October 2021

  @phicks12 thanks a lot

  is there a way of editing the white sticky style? i would like to change the sticky header background colour and active link + links as well. I tried doing this on header builder plug it but it does not use the same styling ("line below link") which i really like.
• Phil

  October 2021

  You can achieve that by writing a CSS code, and placing it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

  Please let me know if you need help with writing it, but I will need a link to your website.

  
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mrmzalewski

  October 2021

  https://forum.muffingroup.com/betheme/discussion/comment/205880#Comment_205880

  hi there

  that would be very helpful, thanks, demo page here: https://interi.co.uk/home/

  i would like to be able to change colours of the following:

  • background
  • active link
  • link
  • hove over link

  Also, additional question; is there a way to apply the "line below link" in the header builder (i do like how easy it is to use)?

  thank you for your help!
• Phil

  October 2021

  Please, try the following code:

  #Top_bar.is-sticky{
     background-color: #213705!important;
  }
  #Top_bar.is-sticky .menu > li.current-menu-item > a{
     color: #000!important; //active page menu item color
  }
  #Top_bar.is-sticky .menu > li > a{
     color: #ff00ff!important; //menu item
  }
  #Top_bar.is-sticky .menu > li > a:hover{
     color: #000!important; //menu item hover color
  }
  #Top_bar.is-sticky .menu > li > a:after{
     background-color: #000!important; //underline color
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next