Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 12, 2014 at 4:36 am #302980
    websiteworkers

    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

    August 12, 2014 at 11:42 am #303119
    Yigit

    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

    August 13, 2014 at 12:56 am #303491
    websiteworkers

    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?

    August 13, 2014 at 2:20 pm #303829
    Yigit

    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

    August 13, 2014 at 2:24 pm #303831
    Günter

    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

    August 13, 2014 at 4:34 pm #303914
    websiteworkers

    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.

    August 13, 2014 at 4:40 pm #303918
    Yigit

    Hi!

    Please add following code to Quick CSS as well

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

    Regards,
    Yigit

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