Creating zones in the navigation bar in F3

Actually neither of it. I’m using the following css code to make it work:

body {
	background-image: url("%resource(images/fynndesign-bg.png)%")!important;
	background-size: auto 140%!important;
	background-repeat: no-repeat!important;
	background-attachment: fixed!important;
	background-position: left center!important;
}

I don’t seem to get this to work with just the Control Center and / or Blacksmith. I don’t mind using custom css to make this happen. Just … without all the !important (which I prefer to avoid if possible) it won’t show the logo at all. Even if I set the body background in the control center to custom and an apply a transparent background color. Which I don’t want. I want #F7F4F3 as the background color and my logo as described.

Here’s the project file:
https://dev.fynndesign.de/fynndesign.rwc.zip.

Oh, and one thing I do wonder… the navigation logo can be set to a custom width, but not height. Google Page Speed insights of course moans about that because of the auto for the height. I personally would’ve preferred to set the height for the logo, not the width :wink:

Thanks for checking,
Fynn

This is too much to take in from my phone. I’ll have to look at this tomorrow when I’m home.

Oh sure. I didn’t even expect you to answer before tomorrow, because of family time. I know how important that is. So, by all means, take your time.

Oh, and when you take a look at it, I noticed that the mobile menu looks odd - it reserves the space for the dropdown items that appear when hovering over the parent dropdown menu. Going to read through the documentation for the Navigation again though, might have missed something.

And even though I put the same custom class (.bg-blur) in the dropdown custom classes field, as I did in the navigation bar itself, the dropdown menus don’t get blurred.

Hope that helps.

Cheers,
Fynn

Let’s take things one step at a time. You’re excitedly throwing a lot of different things at me at once and my brain can barely keep up with the load it is under as-is. :rofl:

Let’s start with the background of the site. The code you’re using, via your own CSS, is using a combination of settings not available in the site background settings in Control Center. It just wasn’t created with this styling in mind. While I think it is a bit more niche, I think it is worth noting it as a possibility for improvement in my lengthy todo list.

Please share a project file and screenshot / screen recording of this so I can see what you’re seeing.

Hey Adam,

sorry for throwing so much at you. And thanks for answering. As said, I have no issues using custom css, I’m just no friend of having to add an !important after each of the 5 rules.

For the mobile dropdown menu:

The project file is here: https://dev.fynndesign.de/fynndesign.rwc.zip

The work in progress is online here: https://dev.fynndesign.de

And here’s a screen recording: https://dev.fynndesign.de/screen-recording.mov

I managed to add the bg-blur to the dropdown menu by creating a 2nd css rule / stylesheet and targeting just the .dropdown-menu. So that’s sorted :wink:

Why? It just means you’re overriding the Bootstrap / Foundry code. It isn’t a forbidden, or taboo CSS property. :wink:

I’m about to go make lunch, but when I’m back from eating I’ll take a look at this.

1 Like

This is what I see with the default navigation bar. Only things I did after adding it to the page was to add a drop down and set the drop down trigger to hover: CleanShot 2023-02-06 at 12.49.48 · CleanShot Cloud

I suspect it is from the animation as the animation needs somewhere to start from. Should probably only enable the animation for non-mobile display, if possible.

1 Like

Ah, cheers. The subtle animation was indeed the issue. Thank you.

It’s because the animation needs somewhere to be. You just don’t notice it for normal drop downs. I’ve got it on my list to look at. Will work something out.

Think I got this one worked out @pumpkin. Was a tough one for something so benign. I need to do some more testing but I think I fixed this one. It’ll be in the next update.

4 Likes