[NavBar with Logo Centered Inside Navbar]
I was wondering if Blocs 3, not HTML, CSS or JS, can make a sticky, possible transparent, NavMenu with 3 Linked Items on one side and 3 on the other and with in between the Logo (includes hypyerlink). Sounds tricky to me, but I’m sure it can be done.
Any suggestions would be great. Thank you for anyone help
Off the top of my head I can think of 2 ways you could probably make this work. So I think it’s possible.
No CSS is tricky, you realise as soon as you use the class manager your using CSS
I have a couple of busy days ahead, so won’t test it at the moment. But you have been using blocs a long time, I’m sure you will figure it out before hand.
You could add the logo as a background image to your navbar, You do it with a custom class. You will be able to adjust the size of the logo to suit the page. You then add your navigation as normal and select the nav item that is just left of centre and add a custom class. Select the right margin and and adjust it so the menu sits outside of the logo limits.
Ok, my curiosity was getting the better of me, so I built this… I can do a video walk through later tonight about what I did, so you understand what’s happening. (depending on how my day goes lol)
UPDATE:@KBConcepts Here is a tutorial of what I did (Since I used some flex classes, I thought it was best to explain how that works) . Excuse the tiredness, I hope it makes sense
That was so cool of you @PeteSharp to take the time, when I know you have you’re own project, to put this together.
Genius! I woke up this morning to find you sharing this very well put together tutorial. Thank you so much!
Great video! I have been learning flex these past months, and it’s really cool to have these classes in Blocs! Very useful!
One question, why didn’t you just use the same visibility settings in the inspector for the centered logo? I think it should be doing the same thing as what your class does in the video. Or maybe there is some other reason why you’ve used class for it?
Hey @Eldar, thanks and good point, it wasn’t working when I first built it earlier that day and I didn’t try it again (nice spotting)
If this was an actual project of mine both icons would have had classes anyway and I would have used the display property and not the visibility. I would try and avoid having some styles in the side panel and others in a custom class if I can.
Flex is definitely one of the key things to get your head around heading into the future with Bootstrap.
EDIT: Interesting when I re-tried the visibility it worked, must have been one of those “things”. In my own project I would have also used the class navbar-brand for the other image and not used the visibility options.
Can you divide the list on you need to do two for this nav? I check on a website with this and they are using two lists one for right and another for left!