Hi!
I am fairly stuck at how to achieve this, I can’t seem to find an answer online either. I’d like to vertically stack two elements in a navbar, a logo and a nav (like the design below).
How can I achieve something like this in Bootstrap Studio, whilst maintaining responsiveness?
Thanks!
Ok, I solved my own problem
I added the container class to both the navbar brand, navbar collapse and navbar toggler. Such a simple solution.
Now I need to figure out how I can place the navbar toggler the same way as the design shows 
Actually there is no need to add container settings to your nav, it should work correctly out of the box if it came from the BSS components. What is actually needed is for you to “not” put them all in the same container. Instead create a new container/row/col whatever is needed depending on your structure and put the logo and title within that. And alter your settings as needed to center them etc. You should be absolutely sure that your nav will work on all sizes the way you have it done now.
I assume this is a new website you are building for a client. I searched Google and found this page, which appears to be a work-in-progress…
This layout is definitely not done correctly.
For desktop sizes, the Neptune Logo should be in it’s own separate container at the top… container > row > column, with the column set to “centered”, and the image itself should be set to responsive, and (assuming you want it to be clickable) placed inside a link, with the URL set to index.com.
Then, below this container, should follow the Navbar.
The Logo in the Navbar should be inside the “Brand” component (with the URL set to index.com) and then, using Bootstrap’s responsive display options, you would hide the top container with the logo on all screen sizes that are smaller than what you have Navbar’s expanded setting set to (ex. LG and Above.)
So if the Navbar Expanded option is set to LG and Above, then you would set the responsive display on the top Container to None and then set it to Block on LG.
At the same time, so that the Logo in the Navbar does not show up on desktop sizes, you would use the responsive display options to hide the Brand on LG (and XL as a natural conseqence.)
Ideally, if I were building this site, I would use an actual font for the words BAR & RESTAURANT (as opposed to making them part of the logo) so that they would be picked up by Google as part of the website’s SEO.
In fact, I’d create this entire logo using fonts and CSS, (even the ships wheel could be done with CSS and scaling.) This way, the name of the restaurant is also part of the page’s text, and hence readable by search engines. It also keeps the file size down, eliminates an image, and speeds up page load.
Hi printninja,
Wow thank you so much for the feedback. Sorry for the late response, I’ve been very busy with University work (finishing my Masters degree right now). I will absolutely do the changes you mentioned, thank you very much man. Luckily the website is for my parents own bar/restaurant so there isn’t much of a concrete deadline (they asked me to do it for them).
Thank you so much for the feedback though I really appreciate it, feedback is something I really value as you can learn so much from it (like I just have haha). When I start working on this again I’ll do those changes you mentioned.
Cheers man!
