jca

Customer
I'm using Flat Awesome+ -- what would be the css needed in extra.less to have the small nav bar logo appear in the sticky top nav bar on scroll?

Right now the two options are: large logo block at the top of the page with no logo in the top nav bar, or turn off the top logo block and the small logo appears in the nav bar at all times. Basically I'd like to combine both options: Have the main top large logo block, with no logo in the nav bar, but on scroll past the top logo block, when the top menu turns "sticky", the small logo pops into the menu. I'm sure it's an obvious change with media queries, but I'm missing the right combination to get this working right across the different screen size breakpoints. I assume it would involve something like:

extra.less:
.is-sticky .p-nav-inner .p-nav-smallLogo
{
    display: inline-block;   
    margin-left: @xf-pageEdgeSpacer;
}

Can you help?

Thanks.
 
That CSS is exactly what you need, is it not working? I guess the only change I'd make is wrap it in a media query so it doesn't mess with the spacing in mobile:

Code:
@media (min-width: (@xf-responsiveMedium  + 1))
{
.is-sticky .p-nav-inner .p-nav-smallLogo
{
    display: inline-block;   
    margin-left: @xf-pageEdgeSpacer;
}
}
 
  • Like
Reactions: jca
Yeah, I think I have the media queries wrong.

Thanks for the code! It seems to be working. I'm wondering what the tweak would be to have the top logo block also still appear on the smallest viewports (say, like the iPhone at 375px)? Right now it disappears on small viewports (as it probably should), but I wanted to see what it would look like with the top header also included at the smallest size(s).

What would the code be to also make the header logo block appear on small devices?

Thanks for all your help.
 
We have an option to show the logo block on mobile, but that hides the navigation logo.

Try this CSS instead:

Code:
.p-header {
    display: block !important;
}

Should help and keep the logo in the navigation.
 
  • Like
Reactions: jca

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back