NavMenu | Center Logo | NavMenu

[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 :smile:

Love to hear from, although I know you’re all busy. @Pealco, @Eldar, @Jakerlund, @Flashman, @Whittfield

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 :wink:

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. :grinning:

1 Like

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.

2 Likes

Very Cool @hendon52!
Would this need any special tweaking to make it responsive?

Not really, Because it’s all done with custom classes, you simply adjust the settings in the classes for each breakpoint.

1 Like

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)

Blocs_Menu_Logo_Center_Responsive.bloc (1.4 MB)

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 :blush: :laughing: :sleeping:

10 Likes

That was so cool of you @Malachiman 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! :smile:

Hi @Malachiman,

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?

Best regards,
Eldar

2 Likes

Hey @Malachiman - fantastic video and great to see how these work. Nice one.

1 Like

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 :joy: (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.

3 Likes

So nice to put a voice to your pict :stuck_out_tongue: great video!!
What if you want to do something like this?

1 Like

The answer is on the Bootstrap Docs, which is why I put that in the video :grin:

We are lucky to be the only nation with no accent :rofl:

You should hear mine :stuck_out_tongue:

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!

You can use the same process I used above. Just set the logo to take up more space.

Ahh right!! Thank you :blush:

Hey,

If you wanted to create was Stewie was suggesting you can do this with 1 extra class.

Used a class called flex-fill and changed the menu width to 100%.

3 Likes

What happened to your voice :stuck_out_tongue:
Awesome video!!! Thanks a lot! Im actually doing a website like this right now :smiley: