Adjusting the alignment of Bootstrap navbar

I'm new to CSS and I want to center the brand logo and links in the navbar.

HTML

    <nav class="navbar navbar-expand-md center">
    <a class="navbar-brand" href="http://www.dimsum.dk" target="_blank">
        <img src={% static 'media/HIDDEN DIMSUM logo final.png'%} width="100" alt="">
    </a>

    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="main-navigation">
        <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Book Table</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="http://www.dimsumbox.dk" target="_blank">
            Order Dimsum Box</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="http://www.dimsumshop.dk" target="_blank">
            Order Takeaway</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
            About</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
            Contact</a>
        </li>

        </ul>
    </div>
</nav>

CSS

.navbar {
    background: #d48498;
}

.nav-link {
    color: black;
    font-size: 24px;
    font-weight: bold;
}

.navbar.center .nav-item {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

Current navbar appearance can be seen here: https://i.sstatic.net/5Qren.png

I'm aiming to center the logo and have the links displayed in a new line also centered as follows:

                                         Logo
                         Link 1      Link 2    Link 3   Link 4

I have attempted to use justify center in CSS but it hasn't worked.

csstwitter-bootstrapbootstrap-4

Answer №1

This snippet of code should be added to your stylesheet:

@media (min-width: 768px) {
   .navbar {
     flex-flow: wrap;
   }

   .navbar-brand {
     width: 100%;
     text-align: center;
   }

   .navbar-brand img {
     height: 50px; /*Adjust logo size*/
     width: auto;
   }

   .navbar-collapse {
     justify-content: center;
   }
}

Answer №3

To customize your navbar in Bootstrap, add the following CSS code after including the bootstrap.css file:

.navbar-brand {
    display: flex;
    width: 100%;
    justify-content: center !important;
}
.navbar {
    flex-wrap: wrap !important;
    justify-content: center !important;
}
.navbar-nav{
    width:100%;
    justify-content:center !important
}

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

Ways to demonstrate a specific attribute of the item included in the table

Currently, I am utilizing bootstrap vue and facing a challenge in passing relevant information to a component from the data being transferred to the table. <div> <b-table :items="guests" :fields="fields" : ...

bootstrap-4bootstrap-5bootstrap-vue

Adjust the Size of Bootstrap Offcanvas using CSS (Bootstrap version 5.2)

Is there a way to change the size of specific bootstrap offcanvas elements without affecting all of them? I am aware that I can modify the SASS variable ($offcanvas-horizontal-width: 400px) to change the size of all offcanvas elements. What I would like i ...

htmlcssbootstrap-5

Exploring the Possibilities of Integrating Tabler with Laravel

Exploring the possibility of integrating the Tabler administration panel with Laravel, I began by trying to install the Tabler UI using npm: npm install tabler-ui I proceeded to add the 'tabler' package to 'resources/sass/tabler.scss' ...

laraveltwitter-bootstrapnpmwebpacklaravel-mix

How to Toggle the Submit Button Using jQuery

I have implemented a feature using jQuery to disable the submit button and display a loading image. Here is how I have set it up: The HTML structure for the submit button looks like this: <div id="registerbtn" name="registerbtn"> <input typ ...

jqueryhtmlcssyii

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Is there a way to display an X mark in red on checkboxes when the ng-disabled condition is evaluated as true? I am a beginner in Angular.js and would appreciate any assistance. Here is what I have attempted so far: if (module.Name === 'val1' || ...

javascriptcssangularjscheckbox

Identify the currently active subitem within the item-active class in a PHP carousel slider

I am working on creating an image carousel slider with 4 items and 4 slides each. These images will act as radio buttons, and I want to highlight the slide corresponding to the selected radio button. So, when the carousel loads, the selected slide should b ...

javascriptphptwitter-bootstrapcss

Some devices may start the Flutter web page zoomed in by default

Experiencing Zoom Issue on Flutter Web Project: While working on my Flutter web project, I have encountered an issue where the page loads with a zoomed-in view on certain devices. Despite setting the viewport meta tag correctly, the zoom problem persists. ...

htmlcssflutter

How to Vertically Align an HTML Element Inside a Div with Changing Height

Similar Question: Issue with vertical alignment Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size? View example here Thank you! ...

css

The tooltip is being truncated

https://i.sstatic.net/o41Qz.png Struggling with a tooltip that keeps getting cut off? I've tried everything and still can't get it right. <th class="fd-table--header-cell" scope="col"> <p class=&q ...

htmlcssangular

What could be causing this Bootstrap column to misbehave?

Why is the content stacking within each list item instead of being on the same line? I've attempted using floating and adjusting the position, but nothing seems to be working. How can I resolve this issue? .icon-left{ float:left; padding: 1 ...

csstwitter-bootstrap

The hamburger menu on the navigation bar only functions the first time it is clicked

I've encountered an issue with my hidden menu nav bar. The hamburger and close buttons only work once. Should I organize the events within a function and call it at the end, or perhaps use a loop for the button events? It's worth noting that I d ...

javascripthtmlcss

Is there a way to have the inline form appear on the same line as the buttons?

Currently, I am working on developing an app using Bootstrap 4. In my layout, I have 3 buttons and an inline form. However, the form is displaying below the buttons instead of being in the same line. Can anyone provide guidance on how I can ensure that a ...

cssbootstrap-4

Adding a gradient overlay to an image that has a see-through background

I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...

csssvg

When the button is clicked, my goal is to increase the value of the text field by one using JavaScript

I need the functionality for each button to increment the value text field located next to it <input type="number" value="0" min="0" max="5" step="1" id="qty"/> <button onclick="buttonClick()" type="button" class="btn btn-success btn-sm" id="add" ...

javascripthtmlbootstrap-4dom-events

Can an image map be utilized within an <a> element?

I am attempting to implement an image map within an <a> tag. It seems to be functioning correctly in Chrome, but I am encountering issues with it not working in Internet Explorer. Is it acceptable to use an image map in an <a> tag? Below is th ...

javascripthtmlcss

Creating PDFs with Laravel

Currently, I am utilizing LynX39\LaraPdfMerger to create PDF files from a file named pdf.blade.php. While everything appears fine when it's a regular HTML file, the generated PDF file looks incorrect and unattractive. Is there a method to ensure ...

laravel-5bootstrap-4pdf-generationlaravel-blade

Looking for an alternative to document.querySelectorAll?

My issue involves using querySelectorAll('a') to select all buttons, but I only want to target two specific buttons labeled 'Know More'. How can I achieve this? Below is the code snippet in question: const buttons = document.query ...

javascripthtmlcss

Accordion menu designed exclusively with JavaScript

Implementation of required menu structure: Main Menu Submenu Contacts News Photo Submenu Submenu Submenu Main Menu Main Menu Main Menu When clicking on the "Main Menu" button, a list of "Submenu" elements opens. Clicking on the "Submenu" button ope ...

javascripthtmlcss

Enhancing ng-grid with pagination by incorporating diverse images

I am currently working with a grid that displays images as values in one of its columns using the code below. { field: 'TR', displayName: 'Trigger Redundancy', cellTemplate: '<div class="ngCellText" ng-class="col.co ...

angularjstwitter-bootstrapng-grid

How to toggle classes on anchor tags using jQuery for Twitter Bootstrap buttons?

I built a single-page website. The navigation is made up of buttons styled with bootstrap 3. Since it's a single page, the buttons are anchor tags. I'm trying to figure out how to apply an .active class to the last clicked anchor tag. Here is t ...

jqueryhtmlcsstwitter-bootstrapanchor