Nav Bar Logo Title On Sticky Only?

Hi there, I’ve got a logo on the initial front page, therefore I don’t want it to appear in the Nav Bar at the same time in the fixed position. But when scrolling down I want it to appear in the Sticky menu, as scrolling down the page the main logo as a graphic at the top of the page has scrolled out of view.

If I disable view from fixed it disables view from sticky also.

I’ve been puzzling around with it and can’t seem to find if it can be done other than duplicating the Nav Bar and toggling visibility, but then that would be a bit code inefficient and ensuring changes are always made to two nav bars.

Can it be done No Logo Title in fixed but Logo and Title in sticky?

Thanks

Ben

1 Like

This can be done with CSS.

nav.navbar:not(.fdy-stuck) > div.inner-container > a.branding-link:first-child {
  display: none;
}
3 Likes

Hi Rodney, thanks for that, I couldn’t get it to work though, is it the required CSS for F2 by any chance? I realise I forgot to say I’m using F3.

I tried both inline with a CSS ‘widget’ and also tried it in the CSS panel, neither of those I managed to get it to work, also tried with those adding the class in Navbar.

Does any of that seem the wrong approach?

It’s for F3 and I tried it before I posted it.
Give me a minute. I’ll try a couple more things.

I originally tried it on the head tab of the html code side bar.

I just tried it in the site wide CSS, the css tab of the html code side bar and inside Joe Workman’s CSS stack from his starter pack.

It works with all methods.

Do you have this published somewhere? I could take a look at what CSS is getting generated on your page.

Both of these work perfectly for me.

Untitled

No logo and floating

Logo and sticky

2 Likes

Curious… that’s exactly what I used, the ‘widget’ was the css stack from Joe’s starter pack, really handy for little custom things here and there, also tried the same method in the page. No it’s not published yet as I’m still developing it, hoping to get the first draught up today. That’s possibly the cause, hold that thought, I’ll keep you posted, it’s reassuring to see your examples, I therefore know it works, as with anything if I keep at it it will get there, and it will be some little thing I’m omitting. Thanks again Rodney, I’ll keep you psted.

You’re sure you didn’t make a typo when you copied the CSS?

If you get it published, post the link and I’ll take a look at the html/css, maybe something is different on your end. I don’t know why there would be though. Not much more help I can give until then.

1 Like

Thank you very much Rodney, that has worked perfectly. I’m not sure what happened, but I have done exactly the same as before using the CSS Starter Kit stack to place inline just as before and bingo it is working! I wonder if it was a typo previously, I’m wondering if I didn’t copy the closing bracket and then was just copy and pasting the same incorrect code each time. But it’s working and bob on, thanks again, it’s really appreciated and sorted my dilema.

Ben

Glad I could be of help

3 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.