Align the brand logo in the center of the navbar and position the 'help' icon to the right

I am facing a challenge in adding an icon to the right of my centered brand text without affecting its alignment.

Currently, the text is perfectly centered at the top. I wish to place an icon on its extreme right side.

Here is how it looks presently

And this is how I envision it to appear

This is the code I am using:

<nav class="navbar navbar-expand-lg fixed-top justify-content-center">
    <a class="navbar-brand text-center">
        <span class="text-strong">
            Brand
        </span>
    </a>
</nav>

I have thought about dividing it into 3 columns and centering the brand text in the middle column while placing the icon in the last column, but I don't have any content for the first column.

Answer №1

To avoid interfering with the centered brand name when adding an image, one simple solution is to set the position of the image to absolute. By doing this, the image will act independently and won't disrupt the layout of the brand name. However, it's important to ensure that the positioning of the image is correct.

Below is a method I devised using absolute positioning for the image:

You may need to adjust the margins of your image after placing it in the container. The provided code includes borders as visual aids for the elements.

.container {
display:flex;
justify-content: center;
padding-top: 1vw;
padding-bottom: 1vw;
}

.brand {
display:flex;
border: 2px solid;
margin: auto;
text-align:center;
}

.brandLogo {
border: 2px solid;
display:flex;
position:absolute;
right:1vw;


}
<nav class="navbar navbar-expand-lg">

        
        <div class="container">
        
            <div class="brand">
               <h1>Brand</h1>
            </div>
            
            <div class="brandLogo">
              <img src="#" alt="brandLogo">
            </div>
        </div>
    
</nav>

Answer №2

An alternative option would be utilizing Grid Templates, which in my view, offer a more organized and user-friendly approach.

.container {
    font-size: 18px;
    min-height: 100%;
    width: 100%;
    display: grid;
    text-align: center;
    grid-template-columns: .5fr 2.5fr .5fr;
    grid-template-rows: 1fr;
    grid-gap: 10px;
    grid-template-areas:
      "...... brand logo";
 }

.brand {
grid-area: brand;
border: 2px solid;
padding: .5rem;
font-size: 3rem;
}

.brandLogo {
grid-area: logo;
border: 2px solid;
}
<nav class="navbar navbar-expand-lg">
    
        
        <div class="container">
        
            <div class="brand">
               Brand
            </div>
            
            <div class="brandLogo">
              <img src="#" alt="brandLogo">
            </div>
        </div>
    
</nav>

Answer №3

You have the ability to include an empty flex item before your flex box!

<nav class="navbar navbar-expand-lg fixed-top justify-content-center">
    <a class="navbar-brand text-center">
        <span class="text-strong">
            Brand
        </span>
    </a>
    <div class="icon">
        <img src='icon.svg' />
    </div>
</nav>

To apply this layout in your CSS, utilize the following styles:

//flex container

.navbar{ 
    display: flex;
    justify-content: space-between;
}

//flex items

.navbar:before {
    content:'';
    flex-basis: 33.3333%;
}
.navbar-brand, .icon {
    flex-basis: 33.3333%;
    display: flex;
}
.navbar-brand {
    justify-content: center;
}
.icon {
    justify-content: flex-end;
}


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

Using CSS flex with a column layout that does not expand to the full width of its parent

My vertical navigation bar includes the following list items: <ul class="nav"> <li> <div> <i class="fa fa-tachometer"></i> <a href="#" class="noselect">Dashboard</a> </div> ...

The visual appearance of an element generated by Javascript is not currently displayed

I recently completed a project where I used JavaScript to create an element and fetch data from Firebase Firestore database, then appended it to the HTML body. The structure included a div serving as the container box with object.className, an h4 for the t ...

Tips for adjusting image size in Bootstrap carousel

Is it possible to change the width of the image in this carousel? How can I resize the image without affecting the red box? I've tried numerous solutions on various forums, but none seem to work. The image just won't shrink the way I want it to ...

The keyframe spinner fails to function properly on Firefox and results in blurry text

I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other ke ...

Issue with printing error messages for JavaScript form validation

I have implemented the following code for a form to handle validation and display errors below the fields when they occur: <!DOCTYPE html> <html> <head> <style type="text/css"> .errorcss { background-color: yellow; color:re ...

Aligning text in the center of a header, positioned beside an image

I am facing an issue with centering text within a banner. The banner is divided into 12 columns, with a cross icon placed in the left-most column for closing the window. However, the text is not centering within the whole banner width but only within the s ...

The initial selection in the dropdown menu is not specified

When I include an external JSON file in my script tag, the Dropdown displays the JSON data correctly but it adds an extra "undefined" value to the dropdown options. Here is the content of my JSON File: { "vendor_name":["User 1", "User 2", "User 3"] } Th ...

The dimensions of images and text in HTML

I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...

Angular footer is missing icons

Recently, I started using Angular and installed Bootstrap 4.6.0 on Angular 12. Everything was working fine, except for one little issue - the icons in the footer section were not showing up as expected. It seemed like they were not part of Bootstrap or som ...

Struggling to set up SCSS integration with Bootstrap in a React project?

Currently, as I delve into learning React, I am encountering an issue with configuring SCSS alongside Bootstrap in a project that was originally constructed by a friend. The Bootstrap setup works flawlessly, but I encounter a particular type error when att ...

Add movement to elements as you scroll down the page with Angular

We are utilizing Angular.js combined with Bootstrap, and there is no jQuery included in our project. I am interested in implementing animate.css to create a fading effect for elements on the page as users scroll up and down. I came across an example that ...

A sleek CSS text link for a stylish video carousel

I am attempting to create a CSS-only text link to video slider within our Umbraco CMS. Due to the limitations of TinyMCE WYSIWYG, I am restricted in the amount of code I can use as it will strip out most of it. So far, I have developed a basic CSS slider ...

How can I customize the variables in Webpack for Sass and Foundation?

Currently, I am in the process of using webpack to manage all of my project assets. In my app.js file, I am loading and concatenating my assets with the help of ExtractTextPlugin: import 'foundation-sites/scss/normalize.scss'; import 'foun ...

What is the best way to reveal a hidden section of an image contained within a div with a fixed height, using only CSS?

I have a container div that is 150x150 in size and contains an image that is 150x180 in size. The div has the CSS property overflow: hidden enabled, so part of the image is not visible. While the div size is fixed at 150x150, the height of the image may va ...

Manage the Bootstrap accordion prior to triggering the pane change event

I have a unique scenario where there is a wizard with accordion steps. My goal is to implement proper error handling at each step and allow users to open random panes without following the wizard sequence. Is it possible to trigger an event in Bootstrap a ...

Buttons aligned vertically alongside an input text field

I am trying to align two buttons vertically under an input text box with the middle aligned. This is what I have done so far: jQuery(document).ready(function($) { // Implementing bootstrap minus and plus plugin // Reference: http://jsfiddle.net/lael ...

Add a style to every div except for the final one

I've attempted to add a unique style to all divs with the same class within a parent div, except for the last one. Strangely, my code doesn't seem to work as expected for this particular case. Can anyone spot what I might be overlooking? Right no ...

What strategies can be utilized to enhance the cleanliness of these functions?

Is there a way to avoid adding new lines of JS code every time I add a new image to the HTML? $(document).ready(function() { $('.btn').click(function() { var bid = $(this).attr('id'); if(bid=="img1" || bid == "img2" || bid == "img3"){ ...

Jquery Slidedown causing adjacent div to shift downward

Currently, I am attempting to position a div absolutely using CSS. I have two divs on which I am implementing jQuery slide down and slide up functionalities. The issue I am facing is that when one div slides down, the other div is also affected by the same ...

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

I'm trying to create a clickable effect using CSS only with labels and inputs. However, I am struggling to replicate the same effect on my ::after pseudo-element without moving the input outside of the label. I attempted using flexbox order property b ...