Position your Logo to the left, align the Menu in the center, and place top links on the right using Bootstrap

I am currently struggling to create two rows with the logo aligned to the left, 'Home' and 'User' menu links at the top right corner, and a second row displaying 'Link1', 'Link2', 'Link3' menus centered. The code provided below is not aligning properly.

I have attempted to use 'navbar-nav mr-auto' for the logo, but it didn't work. I also tried using 'Home' and 'About' links with 'ml-auto', but that didn't work either. 

*******************************************************************************************
                                                                           Home About User
Logo Heading1                                                              

                          Link1  Link2  Link3  Link4
*******************************************************************************************

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand mr-auto" href="">
            <img style="width: 72px; height: 71px;" src="logo-1.png">Heading
        </a>
        <div class="d-flex flex-column flex-wrap" id="navbarCollapse">
            <ul class="navbar-nav mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="ace.aspx">Home</a>
                </li>
            <li class="nav-item">
                <a class="nav-link" href="About.aspx" >About</a>
            </li>
                <li class="nav-item">
                <a class="nav-link" href="User.aspx" >User</a>
            </li>

            </ul>

            <div id="divSubMenu" runat="server" >
                <ul class="navbar-nav mx-auto mt-auto">
                    <li class="nav-item active" id="liDashboard" runat="server">
                        <a class="nav-link" href="Dashboard.aspx">Link1</a>
                    </li>
                    <li class="nav-item" id="liaint" runat="server">
                        <a class="nav-link" href="ation.aspx">Link2</a>
                    </li>
                    <li class="nav-item" id="liign" runat="server">
                        <a class="nav-link">Link3</a>
                    </li>
                    <li class="nav-item" id="lise" runat="server">
                        <a class="nav-link" href="Search.aspx">Link4</a>
                    </li>

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Give this code a try. Hopefully, it will be beneficial for you.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
 <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
    <ul class="navbar-nav mx-auto text-md-center mt-5">
      <li class="nav-item active" id="liDashboard" runat="server">
        <a class="nav-link" href="Dashboard.aspx">Link1</a>
      </li>
      <li class="nav-item" id="liaint" runat="server">
        <a class="nav-link" href="action.aspx">Link2</a>
      </li>
      <li class="nav-item" id="liign" runat="server">
        <a class="nav-link">Link3</a>
      </li>
      <li class="nav-item" id="lise" runat="server">
        <a class="nav-link" href="Search.aspx">Link4</a>
      </li>
    </ul>
    <div class="nav-item flex-row justify-content-md-center justify-content-start flex-nowrap">
     <ul class="navbar-nav mb-5">
      <li class="nav-item">
        <a class="nav-link" href="ace.aspx">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="About.aspx" >About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="User.aspx" >User</a>
      </li>
    </ul>
  </div>
</div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Answer №2

Here is a code snippet that may be helpful:

<div class="container">
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">Logo Heading1</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <ul class="navbar-nav mx-auto">
                <li class="nav-item active" id="liDashboard" runat="server">
                  <a class="nav-link" href="Dashboard.aspx">Link1</a>
                </li>
                <li class="nav-item" id="liaint" runat="server">
                  <a class="nav-link" href="ation.aspx">Link2</a>
                </li>
                <li class="nav-item" id="liign" runat="server">
                  <a class="nav-link">Link3</a>
                </li>
                <li class="nav-item" id="lise" runat="server">
                  <a class="nav-link" href="Search.aspx">Link4</a>
                </li>
              </ul>
              <div class="nav-item">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="ace.aspx">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="About.aspx" >About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="User.aspx" >User</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>

If you want the output to have the logo above the middle below text:

<div class="container">
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand-lg navbar-light align-items-start">
            <a class="navbar-brand" href="#">Logo Heading1</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <ul class="navbar-nav mx-auto mt-5">
                <li class="nav-item active" id="liDashboard" runat="server">
                  <a class="nav-link" href="Dashboard.aspx">Link1</a>
                </li>
                <li class="nav-item" id="liaint" runat="server">
                  <a class="nav-link" href="ation.aspx">Link2</a>
                </li>
                <li class="nav-item" id="liign" runat="server">
                  <a class="nav-link">Link3</a>
                </li>
                <li class="nav-item" id="lise" runat="server">
                  <a class="nav-link" href="Search.aspx">Link4</a>
                </li>
              </ul>
              <div class="nav-item">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="ace.aspx">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="About.aspx" >About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="User.aspx" >User</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>

Answer №3

If you're looking to stack multiple navbars in Bootstrap 4, you can follow the example below. Take a look and let me know if this solution meets your requirements. I hope this answer proves helpful!

EDIT: I have updated the code to only include two rows as per the request in the original question. Best of luck with your implementation!

<!DOCTYPE html>
<html lang="en>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Stack Answer</title>

  <!-- Bootstrap core CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarResponsive1">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">User</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0">
    <div class="container">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="navbar-brand" href="#">
          <img style="width: 72px; height: 71px;" src="http://placehold.it/72x71?text=Logo">
          Stack Answer
          </a>
        </li>
      </ul>
      <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Link1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link4</a>
          </li>
        </ul>
    </div>
  </nav>

  <!-- Page Content -->


  <!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

</body>

</html>

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

flask - Transfer data from Python to HTML using a database

I have written code to fetch data from a database and now I want to display it in an HTML format. Below is the code snippet from app.py @app.route('/news') def news(): import pymysql import re host='localhost' user = ...

pythonhtmlwebflaskserver

Leveraging the Xpath Contains function to locate an element with specific text content

For my Selenium Xpath locators, I have always used the Contains function successfully. However, I recently encountered an issue where it does not work for a TD element in a table, despite sending the correct text to the function. To replicate the problem ...

htmlseleniumxpath

Various formatting options on GitHub Pages

As a beginner in programming, I recently deployed my first project to github pages. However, I am facing two issues: While the desktop version of the site looks perfect, the cards on the home page appear unseparated on mobile and iPad devices. Despite try ...

htmlcssgithub-pages

Displaying the error message "No results found" in PHP AJAX live search with multiple values is not possible

I recently went through a tutorial on Most of it worked smoothly after setting it up on my local machine. However, I encountered an issue when searching for data not present in my database. I expected to receive an error message stating "No result found o ...

javascriptphphtmlmysqlajax

There was an issue retrieving the value from the $.ajax() error function, as it returned [

After successfully receiving data from the input field and sending it to the database, everything seems to be working fine. However, when attempting to retrieve the data after sending it to the database, an error is encountered: [object HTMLInputElement]. ...

javascriptjqueryhtmlajax

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

htmlcss

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Implementing the React Router into a ReactJS project: Methods to prevent users from clicking on links within React-Router's <Link> component

I'm exploring React-Router's Link and have set up the following: <Link to={...}>{this.props.live? "Live": "Not Live"}</Link> In this configuration, if this.props.live is present, I want to display the text "Live" which will lead to ...

javascripthtmlcssreactjsreact-router

Comparing Ajax HTML with XML/JSON responses: which is better for speed or other considerations

I have a website that heavily relies on ajax, and I insert around 3k html formatted pages into the DOM through ajax requests. My current approach involves inserting the entire html responses using jQuery. However, another option is to output in xml or jso ...

htmlxmlajaxjson

How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...

htmlcssnavigationpositionhtml-lists

Adjust the text positioning to be lower without affecting the placement of the image

Hey experts: I'm experimenting with something, but can't quite grasp the concept... My main Div contains a paragraph of text and an image (each nested in their own Divs) at the top of the HTML page. The image is styled to float right while stylin ...

htmlcss

Having trouble centering an icon in a cell within AG Grid?

I am struggling with aligning my checkmarks within the cells of my AG Grid. Currently, they are all left aligned but I need them to be centered. Adjusting the alignment for text is not an issue, but I can't seem to center the material icons. It appear ...

cssangularag-grid

Issues with Google Fonts failing to load correctly

Would you mind taking a look at this issue for me? In all browsers except Firefox, the expected behavior is that a web font remains invisible until fully loaded, preserving space on the page. Interestingly, in Chrome and IE9 (the browsers I tested), ther ...

javascripthtmlcssgoogle-webfonts

What is the best way to horizontally align an element within a Material UI Grid item?

How do I align elements in the center of a Material UI Grid item? Check out this code snippet from my React project: <Grid container> <Grid item xs={4}> // Other content goes here </Grid> <Grid item xs={4}> // How can ...

cssreactjsmaterial-ui

PHP 7.2 does not allow code to reference previously set sessions

Currently, I am utilizing sessions to transmit either a success or error message to the subsequent site by employing an included PHP file (message.php) to exhibit said message. Unfortunately, for unknown reasons, the message.php file is unable to referenc ...

phphtmlsessionphp-7

The use of e.preventDefault in Ajax/jQuery is stopping the page from refreshing and preventing the form

Currently, I am experimenting with using ajax/jQuery/php/html to submit my form without reloading the page. If I include e.preventDefault(), the page remains static and the form does not get submitted. When I remove e.preventDefault(), the form gets submi ...

jqueryhtmlajaxforms

The o-gradient feature is not compatible with Mac and Linux operating systems

Hello there! I am facing an issue with creating a gradient on my website without using an image. Surprisingly, the gradient appears on Windows but not on Mac or Linux operating systems. Any idea why this might be happening? You can check out the website he ...

htmlcss

Wrap the json response in HTML elements

I'm currently learning about AJAX, and I've encountered a major issue that I can't seem to resolve. I pass several variables to PHP, perform various checks there, and then return string values to AJAX. Strangely, I am able to display these r ...

javascriptphpjqueryhtmlajax

Activate text-entry fields after a button has been pressed on polymer 1.0

I am currently developing a project focused on creating a list of doctors using the Polymer 1.0 framework. Within the doctor-list, I have integrated a Vaadin grid called doctors-grid.html to display data sourced from a JSON file. Upon double-clicking on a ...

javascripthtmljsonpolymer

Determining when a message has been ignored using php

One of the features I am working on for my app is adding announcements, which are essentially personalized messages to users. Once a user receives a message and dismisses it, I want to ensure that specific message does not appear again. Here is the PHP co ...

javascriptphphtmljquery