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:
Can you help?
Thanks.
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.