Is there a way to position Brand and Navbar on individual lines?

Seeking guidance as a Bootstrap novice.

I can create a navigation bar with an image brand and nav-items, but I'm wondering if there's a proper way to position the brand above the expanded navigation without resorting to hacks?

This is what I am aiming for:

<nav class="mainNav navbar navbar-expand-md justify-content-center">
    <a class="navbar-brand" href="#">
        <img src="img/logo.png" alt="Logo" height="80px" width="auto">
    </a>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</nav>
csstwitter-bootstrapbootstrap-4navbar

Answer №1

Utilize the flex-column class to arrange navbar items into 2 rows.

  • Group the logo and toggler together within a single flexbox div using d-flex w-100
  • Utilize mx-md-auto for auto-margins to center the logo on wider screens
  • Use text-center to centrally align items in the navbar-nav

Click here to view an example

<nav class="mainNav navbar navbar-expand-md navbar-light flex-column">
    <div class="w-100 d-flex">
        <a class="navbar-brand mx-md-auto" href="#">
            <img src="img/logo.png" alt="Logo" height="80px" width="auto">
        </a>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Explore more about the Navbar and Utility classes in the Bootstrap 4 documentation.

Related inquiries
How can I center the navbar logo in Bootstrap 4 with nav links below?
Creating a Bootstrap 4 Navbar with logo and 2 rows
Implementing a Bootstrap 4 navbar with 2 rows and an inline form

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on positioning a div to float from bottom left to top right using CSS as the window screen size is reduced

I am wondering if it is possible to float the div using CSS in the following manner. My goal is to have CSS DIV 2 move under CSS DIV 1 to the right when the window size is reduced. Please refer to the screenshot below: On larger window sizes, three DIVs a ...

csshtml

The relative positioning is currently being obstructed

Having some trouble using position:relative to shift my logo to the left of my webpage. Oddly, moving it 20px seems to have no effect, but shifting it by 300px downwards causes it to vanish completely. Here's a snippet of my current code: .container ...

cssflexbox

My draggable item seems stuck in place. Any ideas on how to get it moving again?

I have been trying to implement some code I found on this link. Despite adding all the necessary file links, the code is not functioning as expected. It should be able to move within the bounds of a container, but it's not working properly. var max ...

javascripthtmljquerycssjquery-ui-draggable

What are some possible applications for leveraging the HTML5 <link rel> attribute duo of stylesheet and next?

The specification for HTML5 emphasizes the handling of each link created within a link element as separate entities. This means that multiple link elements with `rel="stylesheet"` are treated independently, considering them as distinct external resources a ...

csshtmlstylesheet

What is the best way to incorporate my own custom CSS into a PrimeVue component that already has its own styling?

I'm struggling to create a customized dialog popup using PrimeVue's < p-dialog > component. I can't figure out how to override the default CSS styles that come with it; I want to use my own styles while keeping the functionality intact ...

cssvue.jsfrontendprimevue

I'm curious about the process behind this. Can I copy a Figma component from a website and transfer it into my

Check out this site for an example: Interested in how uikit.co/explore functions? By hovering over any file, a copy button will appear allowing you to easily paste it into your Figma artboard. Want to know how this works and how to implement it on your o ...

javascripthtmlcss

What is the best way to dynamically duplicate the Bootstrap multi-select feature?

$(function() { $('#days').multiselect({ includeSelectAllOption: true }); $('#btnSelected').click(function() { var selected = $("#days option:selected"); var message = ""; selected.each(function() { message ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Eliminate the excess space at the bottom of rows in Materialize CSS

Having difficulty adjusting the padding between two rows in materializecss Troubles with Padding https://i.sstatic.net/KFe1w.png Seeking to eliminate the bottom padding. Managed to remove left and right padding with the following code: <div class="c ...

cssmaterial-designmaterialize

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

phpjavascriptjqueryhtmlcss

How to swap button image upon click in HTML

Is it possible to change the image of a button when it is clicked? #button { text-align:center; float:left; } #button:focus { text-align:center; float:left; background-image: url('qmb2.png'); } <input ...

htmlcssimagebutton

Steps to toggle the visibility of a table by clicking on a plus or minus button

//Custom Table Display Script using JQuery $(document).ready(function(){ $('.table1').on('click',function(){ $('.table1shw').show(); }); }); //A ...

javascripthtmljquerycssbootstrap-4

Unable to display link within a div using CSS hide/show functionality

I came across an example of CSS/HTML on this site and made some modifications. Everything seems to be working fine, except for the <a> link inside the div - it's visible without any issues but when I click on it, all that happens is the div gets ...

htmlcssshowhidden

What strategies can I use to make my div content more adaptable to different screen sizes and

Currently, in my project, I have implemented a layout using the top nav menu (purple part) and the left menu (pink part) as shown in the image. However, I am facing an issue where, upon deleting some content from the view, the pink menu on the left extends ...

javascripthtmlcssbootstrap-4grid

Styling with CSS in Zend Framework

In the process of creating a website using Zend Framework, I have successfully implemented the header, footer, and all the necessary pages. However, I am facing an issue with integrating the CSS file located at public/css/styles.css. When running the webs ...

phphtmlcsszend-framework

Utilize the keyboard's vertical arrows to adjust values as needed

Implement the functionality to increase and decrease the value in a label or p tags using the onkeydown and onkeyup events, without requiring a textbox input. I have come across numerous examples, but they all rely on textboxes. I am looking for a soluti ...

javascripthtmlcss

Adjusting the full width TD media query for HTML emails on iPhone is not functioning properly

I'm encountering an issue with implementing a media query for an HTML email to display correctly on iPhones. Here is a screenshot showing the problem: Upon testing on Android, the footer aligns properly, but on iPhone it doesn't stack as intende ...

htmlcssemailhtml-emailacid

Alignment issues with menus

Could someone help me with aligning my register and login buttons to the right? I will provide any necessary information upon request. Please note that this is just a small part of a larger menu with additional CSS styling. PHP/ HTML: <a href="<?ph ...

phphtmlcssalignmentright-align

Responsive Sidebar with React Hooks

I am working on creating a responsive sidebar in React. I found inspiration from the template provided at and tried to implement it in my project: Block 1: function App() { useEffect(() => { $("#menu-toggle").click(function (e) { ...

reactjsbootstrap-4responsive-designreact-sidebar

Update the text on a button using a different button

function modify_button_text(){ //update the word from cat to dog. } <button id="button_1_id" >Cat</button> <br><br><br><br> <button id="modify_button_text_btn" >Change the Text of Above Button</button> ...

javascripthtmljquerycssarrays

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

javascriptcssgoogle-chromefirefox