Positioning the logo in the center of the page, rather than in the center of a margin

I'm having trouble centering my logo in the middle of the page. When I use m-auto, it centers the logo between the other items, but not the page itself. I also attempted the right:... method, but it didn't work.

Here is my code:

.navbar-nav {
  flex-direction: row !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />


<nav class="navbar navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>


  <ul class="navbar-nav m-auto">
    <a class="navbar-brand" href="#">
      <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
    </a>
  </ul>

  <div class="d-none d-md-block">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item mr-2 pr-4 my-auto">
        <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
      </li>
      <li class="nav-item">
        <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
      </li>
    </ul>
  </div>
</nav>

cssbootstrap-4

Answer №1

If you want to center the logo, the first step is to reorganize it to be in a column layout instead of a row. This will allow the phone number and booking button to stack vertically.

Next, separate the areas into columns and designate their widths so that the two sides are equal and the center takes up the remaining space. For example, the left side could be 25%, the center 50%, and the right side 25%.

Below is the code snippet:

.navbar-nav {
  flex-direction: column !important;
  justify-content: center;
}

.side {
  width: 25%;
}

.middle {
  width: 50%;
  display: flex;
  justify-content: center;
}

.flexend {
  display: flex;
  justify-content: flex-end;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />


<nav class="navbar navbar-light bg-light">
  <div class="side">
    <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div class="middle">
    <div class="logo">
      <a class="navbar-brand" href="#">
        <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
      </a>
    </div>
  </div>

  <div class="side flexend">
    <div class="d-none d-md-block">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mr-2 pr-4 my-auto">
          <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
        </li>
        <li class="nav-item">
          <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer №2

There was a previous inquiry similar to this one: How to Center an Element in Bootstrap 4 Navbar

I will provide an answer, considering that this case involves a logo image.

<nav class="navbar navbar-light flex-row">
    <div class="d-flex flex-fill">
        <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="d-flex flex-fill justify-content-center">
        <a class="navbar-brand" href="#">
            <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px" alt="">
        </a>
    </div>
    <div class="d-none d-md-flex flex-fill">
        <ul class="navbar-nav ml-auto justify-content-end">
            <li class="nav-item mr-2 pr-4 my-auto">
                <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
            </li>
            <li class="nav-item">
                <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
            </li>
        </ul>
    </div>
</nav>

Take a look at the documentation for the correct Navbar structure, as the usage of the toggler in your current setup doesn't adhere to the standard Navbar structure.

For further reference, visit:

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

When implementing Critical CSS, the Jquery function fails to execute upon loading

Currently, I am working on optimizing my website at . In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse. However, ...

javascriptjquerycssoptimizationresize

Crafting visually stunning interfaces with Material UI

I'm a beginner in Material Design and I could use some assistance with the following structure. Can anyone guide me on how to create this? https://i.stack.imgur.com/NpiVz.png I've managed to add a text box, but now I'd like to place a label ...

cssreactjsmaterial-ui

Tips for configuring the navigation links on the current page using Bootstrap

In my Angular application, I have set up navigation links for home, about, notifications, and logout. However, when I click on the home link, it redirects me to the login page instead of remaining on the current page. I need the functionality to stay on ...

htmlangulartwitter-bootstrapbootstrap-4angular-ui-bootstrap

Surrounding a parent div with an additional div element

I'm struggling to summarize my predicament, but let me share some simplified code that highlights the issue (index.html): <html> <body> <div id="wrapper" class="divide"> <div id="top" class="divide"> ...

htmlcss

Dynamically adjust the label position based on the button position

I am currently developing an interface that allows users to change the position of buttons and add a label text under the button. However, I am facing an issue where the label is not always centered below the button due to variations in the size and number ...

htmlcssangulardynamiclabel

Is there a way to align the text input and text area next to each other?

I need help with styling a contact form that consists of 4 text input fields and 1 text area. Here is the current code for the contact form: <form class="contact_form"> <input type="text" placeholder="Name"> <input type="text" plac ...

htmlcss

centering headers using tailwind styles

I am facing a challenge with positioning my main title, logo, and subtitle. I want the subtitle to be centered regardless of the logo's width. Currently, the position of the sub title changes based on the logo's width, resulting in it not aligni ...

htmlcsstailwind-css

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

htmlcssbootstrap-4

Differences in the way websites scroll on Chrome compared to Safari and Firefox

Currently, I am in the process of developing a rendering system for my application that extracts objects from a collection and processes them through JavaScript templates to generate additional children as the user scrolls through the page. The system is d ...

htmlcssgoogle-chromescrollsafari

Modify the text tone within a specific cell

Welcome to my unique webpage where I have implemented a special feature. The text highlighted in red represents the unique identifier for each individual cell. Interestingly, below there is an input field containing the code "0099CC", which corresponds to ...

javascriptcss

Chrome is able to interpret Behat CSS selectors, whereas Firefox struggles with them

Recently I began working with Behat and Selenium for website test automation. One issue I've encountered is that some CSS selectors work in Chrome but not in Firefox. For instance, in my Behat code: Then I press ".topmember-resultList .resultListIte ...

cssseleniumfirefoxbehat

What is the best way to insert an image into a div?

Trying to figure out how to place a flower inside the red box in my div that is overlaid on another one with a higher z-index. The picture I added doesn't seem to show up properly. Any advice on how to make this work? ...

cssimagehtml

Circular center button in the footer UI

Struggling with aligning a button in the footer perfectly? I have two icons on each side and while the UI is almost there, something seems off with the center icon's padding and shadow. I'm currently working with material-ui. Take a look at the i ...

htmlcssreactjsangularjsmaterial-ui

eliminate gaps between hyperlinks using cascading style sheets

I developed a webapp for iOS which has a specific page containing a centered div with 3 buttons. Inside this div, there is a total of 460px with each link measuring as follows: the first and last are 153px while the middle one is 154px. The main issue ar ...

htmlcss

Step-by-step guide to creating a pop-up div that appears on hover and remains visible when clicked

I'm trying to figure out how to make a popup appear when the mouse hovers over it and then stay visible when clicked on. The issue I'm facing is that currently, the popup disappears when the mouse moves away from it. How can I modify the code so ...

javascriptjqueryhtmlcss

Storing the value of the current vertical scroll position in a variable using jQuery

I'm currently dealing with a challenge that involves using the value of (window).scrollTop() as a crucial variable in my project. What I aim to accomplish is to retrieve and utilize the specific scroll value at a particular moment within an if stateme ...

javascriptjquerycssscopescrolltop

Mouse over effect to highlight the crosshair on a table

My code currently enables a crosshair function, but I am looking for a way to limit the highlight effect only within the cursor (hover) area. Instead of highlighting in a "cross" shape, I would like it to show a backward "L" shape. This means that the hig ...

javascripthtmlcss

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

javascriptjqueryhtmlcss

Having difficulty sending emails with attachments using AngularJS

While using Angular, I encountered an issue when sending an email with an attachment. The response I received contained the data code of the file instead of its actual format. See example: https://i.stack.imgur.com/vk7X8.png I am unsure what is causing t ...

javascripthtmlcssangular

Eliminating the table header in the absence of any rows

I have successfully implemented a Bootstrap table in my React application, where users can add or delete rows by clicking on specific buttons. However, I want to hide the table header when there are no rows present in the table. Can anyone guide me on how ...

javascriptreactjsbootstrap-4react-reduxmaterial-ui