Home>Support>Transparent Menu on top, color background when scrolling

Transparent Menu on top, color background when scrolling

Hello Site Origin Team,

I want my menu to have a white background when on “sticky” mode.

I have this css which I found in a previous thread:

/* Vantage Logo in Menu Transparent Menu BG */

nav:first-of-type { display: none; }

.main-navigation.sticky {
  width: 100% !important;
  background: none !important;
}

.main-navigation {
	background: none !important;
	box-shadow: none !important;
}
   #main { padding-top: 100px; }
  .home #main { padding-top: 35px; }

Hope you guys can help! Great theme btw, and better support; I have found almost everything I needed just looking at previous threads.

Have a good one :)

URL: http://servicioswebmex.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jose

    Glad to hear you’ve been making progress.

    If you’re using the Logo in Menu layout then I’m not sure this is possible. In this layout the sticky menu sits over the main menu, even at the top of the page. There is no specific style that’s added when at the top of the page. So it’s not possible, at least with what we have, to differentiate between when the menu is sticky and not.

    Here what you can try, remove the other CSS targeting this first:

    .main-navigation.sticky { 
    background: rgba(255,255,255,0.4);
    }
    

    Adjust as required.

  2. 9 years, 8 months ago Jose AMezcua

    Hello Andrew,
    thanks for the fast reply! I tried it and it kind-of worked, I was looking to get this effect: http://www.michaelgonzalezfirm.com/ but now I not so sure about using the sticky menu at all, so when I tried disabling it in theme settings the menu disappeared all together. Im guessing it is because of this:

     
    nav:first-of-type { display: none; }
    

    Also, when on mobile there is no menu icon or menu or anything :o

    thanks in advance and again great theme, and better support!

  3. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Vantage unfortunately isn’t yet setup for an effect like you’re after. Yes, the CSS you have inserted from my previous thread is causing the problem now. That CSS assumes you have sticky activated.

    The following, with sticky menu and logo in menu activated will show a transparent top menu. It unfortunately doesn’t work with the menu in search option activated:

    /* Vantage Logo in Menu Transparent Menu BG */
    
    nav:first-of-type { display: none; }
    
    .main-navigation.sticky[style] { width: 100% !important; }
    
    .main-navigation {
    	background: rgba(255,255,255,0.5);
    	box-shadow: none !important;
    }
    
    #main { padding-top: 100px; }
    
    .home #main { padding-top: 35px; }
    

    There is unfortunately only so much we can do from the support department. Big changes like these would ideally be a feature suggestion and then worked into future theme development.

    https://siteorigin.com/suggest-feature/

    Sorry I don’t have more.

  4. 9 years, 8 months ago Jose AMezcua

    Hey Andrew,

    do not apologize you have been great! I will try your code in a while! I have one last question, I currently develop low budget websites on wordpress and I am using vantage A LOT. I canĀ“t remember if in the pricing options there is an unlimited website package; if it is great ill buy it, if not could we make it happen?

    thanks,
    J

  5. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for your understanding. If you like how this last snippet works and really need search in the nav, let me know and I’ll re-look at that.

    $50 is our unlimited deployment offer. We don’t mind adding orders up. So for example if you’ve paid $10, just checkout next time at $40, drop me a mail on [email protected] and we’ll mark that as multi-site.

    Thanks for your support.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More