Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 4, 2018 at 5:36 pm #1005703
    mvb1989

    Hi guys,

    This is the first time I’m using Enfold or building a website, so please don’t kill me for asking stupid questions ;)
    I’ve been trying to make the Header solid, and the same color, whether you scroll or not. Also, I want the buttons (magnifying glass, hamburger menu. social media buttons) to be the same color – white.

    I’ve been searching these forums and the web for solutions. Through the settings in General Styling and Advanced Styling (I had put color of the header bar to #292522) I managed to make it the color I want, but the bar was still a little bit transparant when scrolling to the top of the page. Also, because I couldnt change the color of the icons they were not visible when they turned grey during scrolling.

    Example of the site: mepz.nl

    I did find a CSS code to change the color of the hamburger menu (as you can see it’s blue) for which I used this code: 

    .av-hamburger-inner, .av-hamburger-inner::after, .av-hamburger-inner::before {
    background: #00a7db!important;
}

    But this is not sufficient. I’d like to make them all the same color, and that they don’t change color when I scroll.

    So to summarise, I hope someone can help me to:
    1. Make the header bar 1 solid color, that doesn’t go transparant when you scroll to the top.
    2. Change the color of all the icons on the right (social media, hamburger menu, glass) – and that they dont change color when scrolling.
    Basically I’d like to know how to change it for both the transparant header and the normal sticky header.

    Your help is much appreciated!!

    • This topic was modified 7 years, 5 months ago by mvb1989.
    September 5, 2018 at 11:06 am #1006015
    Ismael

    Hey mvb1989,

    Thank you for using Enfold.

    Edit the page and then set the “Layout” > “Header visibility and transparency” to “No transparency”.
    You can change the header color scheme in the General Styling > Logo Area panel.
    Let us know if it helps.

    Best regards,
    Ismael

    September 5, 2018 at 1:31 pm #1006119
    mvb1989

    Hi Ismael,

    That helped a lot, I made the header solid now and adjusted the color. The most important things are resolved for me now, thank you.

    One last question – do you maybe have a line of code like in my example of the original post – that allows me to adjust the color of the magnifying glass, twitter icon and facebook icon seperately? I’d love to give the magnifying glass a different color as I did with the hamburger menu.

    Kind regards,
    Mike

    September 5, 2018 at 6:03 pm #1006236
    Victoria

    Hi Mike,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#menu-item-search [data-av_icon]:before {
    color: red;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.