Remove social icons from menu when scrolling

I'm trying to get my test site to work well with a narrower template width so I can be more consistent with tablets.

I love how the logo, menu and social icons stay on top when scrolling down the page, but when I try to set up a narrower page the social icons will wrap to the next line when scrolling, which looks odd and takes up too much space.

Is there a way to only have the logo and menu stay on top when scrolling and not show the social icons? That would probably fit better for me with a narrower page.

http://www.stnbeta.com

Thanks,
Kent

Hi,
I guess, yes. Try this:

Code: Select all

#gkFixedMenu #gkSocial {display:none;}

How to use it? Check my footer link.

We have also suffix to hide modules from mobile or tablet : https://www.gavick.com/documentation/un ... let-layout

I have also one extra idea for you, please try also this:

Code: Select all

#gkFixedMenu.active {background: transparent; border-bottom:0; -moz-box-shadow: none; box-shadow:none; }
#gkFixedMenu.active .gkPage {
    background:  #fff;
    box-shadow: 0;
}
#gkFixedMenu #gkMainMenu {
    border-left: 1px solid #e5e5e5;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}



That worked great! Thanks for the quick reply.