Top Bar

Hi Sam,

Can you explain a bit more on it's specific behavior? Does it have to appear on mobile as well?

If not, we can try replicating what Avery is using - https://gpsites.co/avery/

It's basically done by placing a Navigation menu widget and Lightweight Social Icon(LSI) widget on the Top bar Widget area. :D

Note: LSI plugin can be replaced with any social media widget plugin you prefer. :D

Hello Elvin,

I do not want the top bar to appear on mobile, so if we can replicate avery, that would be perfect!

Hi there,

Avery uses this CSS to hide the top bar on mobile:

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

Hi Dave,

I tried to add that code but it didn't work to hide the top bar on mobile.

Any other ideas on how I might be able to hide it? Also, could you link the light social icon plugin? I can't seem to find it.

Thanks,
Sam

Oh - i am not seeing the Top Bar - but the Secondary navigation - for that you need this CSS:

@media (max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
}

Whoops, should I be using the top bar function for that? Also, how can I get the social media icon widgets on that bar?

Thank you so much!
Sam

Yeah Top Bar makes it easier to add the social icons as well.
If you use a top bar you just need to add a Social Icons widget followed by a Navigation Menu Widget - that will create the same layout as Avery.

Perfect, that worked. Where can I find the social media icon buttons?

Thanks,
Sam

The Avery site uses the Lightweight Social Icons plugin.
And a little CSS:

.lsi-social-icons li a, .lsi-social-icons li a:hover {
padding: 0px !important;
margin: 10px 6px 0px 6px !important;
}