Centralized logo and slogan with Bootstrap 4 in navigation collapse

I am currently working on a Bootstrap 4 project that involves a navigation bar with a centered logo and tagline, along with links positioned to the left and right. While the setup is close to what I want, my ideal scenario would be for the logo to remain centered even after the nav links collapse.

Below is the code snippet that I have implemented so far:

<nav class="navbar navbar-expand-lg navbar-light bg-white justify-content-between">
    <div class="container-fluid ">

        <div class="d-flex flex-column text-center order-lg-2">

            <a class="navbar-brand" href="#">
                <img src="http://via.placeholder.com/350x150" alt="">
            </a>    

            <h2 class="tagline navbar-text">eco-friendly clothing</h2>

        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse dual-nav w-50 order-lg-3">
            <ul class="nav navbar-nav ml-auto">
                <a class="nav-link" href="#">our ethics</a>
                <a class="nav-link" href="#">contact</a>
                <a class="nav-link" href="#">shop</a>
            </ul>
        </div>

        <div class="navbar-collapse collapse dual-nav w-50 order-lg-1">

            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="">instagram</a></li>
                <li class="nav-item"><a class="nav-link" href="">facebook</a></li>
                <li class="nav-item"><a class="nav-link" href="">pinterest</a></li>
            </ul>

        </div>

    </div>
</nav>

After the links collapse, the navbar toggle appears on the right while the logo and tagline are on the left. Is there a way to keep the logo and tagline centered?

For reference, you can view the codeply link here.

Thank you in advance for any assistance!

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

In order to properly structure the layout of the brand, logo, navbar toggler, and collapsable menus, the parent element using flexbox should be .container-fluid instead of the <nav> element. On smaller screens, set flex-direction: column;, and on larger screens utilize flex-direction: row; along with justify-content: space-between;.

You can also make use of bootstrap's pre-defined classes for this purpose.

<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid flex-column flex-lg-row justify-content-lg-between">
        ...
    </div>
</nav>

Check out the fiddle: http://jsfiddle.net/aq9Laaew/144985/ (no registration needed)

Answer №2

To easily achieve this effect, simply create a "centered" class for the div that holds your logo and header text.

.centered {
margin:auto;
display:block;
}

Does this match what you were envisioning? Take a look at the codepen link provided below.

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

Unlocking the potential of Object[value] in JavaScript/jQuery: A guide to extracting its value

I have a table named 'mytable' with the following structure: <tr> <td><input type="checkbox" name="check[]" value="11"></td> <td>11</td> <td>2014-11-06 18:49:26</td> < ...

javascriptjqueryhtml

Instructions for implementing onclick functionality on an iframe element

Is it possible to use the onclick event in an iframe tag to call a JavaScript function? I have integrated a Facebook like button on my website using an iframe code. When a user clicks on the like button, I would like them to be redirected to a 'thank ...

javascripthtml

When I click on the icon, I wish for it to revert back to its original state by spinning

Is there a way to revert the icons back to their original state when clicked again, without losing any of the current functionalities? When an icon is clicked for the first time, it rotates 180 degrees. The icon rotates back if another icon is clicke ...

javascripthtmlcssrotationicons

How can we stop the brief display of a hidden div from occurring?

I have two divs on my webpage - one to display if JavaScript is disabled, and another if JavaScript is enabled. The issue I am facing is that even when JavaScript is not disabled, the div containing the message stating that JavaScript is disabled briefly ...

javascriptjqueryhtmlcss

Trouble with Selenium Webdriver executing Custom Ribbon Button

I encountered an issue while trying to click on a Custom Ribbon MSCRM2011 Button in an automation script I'm writing. Below is the HTML structure: <li id="contact|NoRelationship|Form|Mscrm.Form.contact.MainTab.ExportData" class="ms-cui-group" unse ...

htmlseleniumxpathselenium-webdriverdynamics-crm

Is it possible to dynamically assign a CSS class to a DOM element during a drag operation while the mouse button is held down?

I am currently working on developing a unique pathfinder visualizer. My progress so far includes creating a grid of size 16x45 using the function below: export const drawBoard = () => { const boardContainer: HTMLDivElement | null = document.querySelec ...

javascriptcsstypescriptdom-events

mapping buttons to images based on dynamic conditions

In my folder, I have over 1000 files. Using opendir, readdir, and is_dir, I can display the thumbnails of these files in my browser. Each thumbnail also has a corresponding button assigned to it. What I'm looking to do now is delete the 500th image wh ...

phpjavascripthtmlcssfile

Tips for Serializing and Deserializing an XML Document using Javascript

I keep encountering the error 'parameter1 is not a valid node' when using document.adoptNode. Here's the code snippet in question: $.ajax({ type: "GET", url: url, datatype: "xml", success: function (results) { ...

javascripthtmlajaxsvg

HTML - Lists Not Displaying Properly in Numerical Order

My goal with HTML is to: Produce 2 Numbered Lists Nest an Unordered List within Each Ordered List and add elements inside Unfortunately, my numbering isn't displaying correctly. Instead of 1. 2. etc., I'm seeing 1. 1. Below is the code I am u ...

htmlhtml-lists

Adjusting animation placement when resizing the window

Is it possible to utilize jquery window.resize() to ensure that the positioning of the two donuts never interferes with the text in the middle of the home? I am unsure of how to connect the x and y values of the window size to adjust the top/left and botto ...

htmlcssanimationposition

Unlock the power to toggle dynamic elements with jQuery

I'm currently using jQuery to enable and disable input elements, but I'm having trouble doing so for similar elements with the same class. Here is the HTML code: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">< ...

javascriptjqueryhtml

disable border-collapse styling in ASP.NET DataList

Currently, I am new to the world of ASP.NET and I am facing a challenge in styling a DataList. Lately, I have developed a fondness for rounded corners on borders, and I am attempting to incorporate this effect into all my pages by implementing it across al ...

asp.netcssdatalist

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

I have encountered an issue that I need assistance with: <input title="1" type="text" class="email"> <input title="2" type="text" class="email"> <input title="3" type="text" class="email"> The HTML code above shows my attempt to extract ...

javascriptjqueryhtml

Loading stylesheets from node_modules before rendering in Angular

I have successfully installed Ionicons in Angular 9 by running npm install --save [email protected]. In order to use them, I imported them into my styles.scss file as shown below: $ionicons-font-path: "~ionicons/dist/fonts"; @import "~ionicons/dist/s ...

cssangularsassnode-modulespreload

"Enhance Your HTA Webpage with a Hover Zoom Effect on CSS Tables

Greetings and thank you for taking the time to read my message. I am relatively new to this, so please bear with me if things seem a bit disorganized. I have constructed a table and am attempting to implement a hover effect to zoom in on a specific cell w ...

csshoverzoominghtml-tablehta

Detecting changes in checkbox states

In my current scenario, I have a section of the screen that can be shown or hidden depending on whether a checkbox is checked. The user can change the state of the checkbox manually or programmatically. The challenge lies in detecting this change and upda ...

javascriptjqueryhtml

The post button isn't appearing on my feed

I recently added a like button to my website, but when I click to publish, the post does not appear on my Wall. Can anyone help me figure out why this is happening? Here is the HTML code for my button: <div class="fb-like" data-send="false" data-layout ...

javascripthtmlfacebookfacebook-like

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

Here is a code snippet I have been using to open a URL in a new tab: window.open(urlToOpen, '_blank', 'noopener noreferrer'); The issue I am experiencing is that when this code is executed for the first time, it opens the URL in a new ...

javascripthtmltypescripturlbrowser

Unable to see the column filter in the data table

My datatable setup includes the column filter js on the page, everything is displaying and working smoothly without any errors in the console. However, after the smoothness loads, the inputs at the bottom are not visible. <body> <div id="stab ...

javascriptphpjqueryhtmldatatables

A chart using JavaScript that displays text values instead of a traditional website

I am a student with no background in programming, however, for my project I need to create a chart based on values from a txt file to display sensor data. I came across a chart that retrieves its values from a website, but I would like to modify it so it c ...

javascripthtml