Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #302980

    Hi there!

    I’ve currently got my menu bar to set to scroll with the page, and it gets smaller when you scroll.

    I like this, but I’d like the menu bar color to change from orange to white, and then I’d also like my links to change from white to orange, and then I’d like to have my logo change to a different one.

    How do I do this?

    Thanks!

    Best,
    Alex

    #303119

    Hey alexmasica!

    You can use following code in Quick CSS field to change the logo when you scroll down

    .header-scrolled .logo img { opacity: 0; }
    .header-scrolled .logo a { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-repeat: no-repeat; background-size: contain; }

    Can you post a screenshot and show the other changes you would like to make?

    Regards,
    Yigit

    #303491

    Hi Yigit,

    Thanks for the reply. Regarding the other changes I’d like to make to this, I don’t have a screenshot to provide but I can try to explain a little better. For reference, my site is http://www.alexmasica.com.

    Currently, my main navigation/header is orange with white text. When you scroll down the page and the header shrinks, I’d like the background to change from orange to white, and I’d also like the text to change from white to orange.

    Does that help?

    #303829

    Hey!

    Yes, please add following code to Quick CSS as well

    .header-scrolled div#header_main {
    background-color: white;
    }
    .header-scrolled .main_menu ul:first-child > li > a {
    color: orange;
    }

    Best regards,
    Yigit

    #303831

    Hi!

    Try the following:

    
    .header-scrolled{
    background-color: #fff;
    }
    
    .header-scrolled .avia-menu-text,
    .header-scrolled #menu-item-search > a
     {
        color:  #ce3f23;
    }
    
    

    Best regards,
    Günter

    #303914

    Thanks, Yigit. Your code worked. The only issue is that when I’m on a page that’s in my main nag (for example, the blog homepage), when I scroll, that specific link/text is white. However, the other links changed to orange.

    #303918

    Hi!

    Please add following code to Quick CSS as well

    .header-scrolled li.current_page_item > a {
    color: red!important;
    }

    Regards,
    Yigit

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