Centering the element on the navbar and ensuring its fixed position

Question

Centering the element on the navbar and ensuring its fixed position

Attempting to create a navbar with elements aligned to the left, right, and center. However, struggling with centering the elements on the screen. Can anyone assist in identifying my mistake?

Additionally, seeking a way to keep the navbar fixed so it does not disappear when scrolling. Any suggestions would be appreciated!

Thank you in advance!

View My Code DEMO

HTML

<nav class="navbar">
        <ul class="nav">
          <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
          </li>   
        </ul>
        <ul class="nav justify-content-center divBtn">
          <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
          </li>   
        </ul>
        <ul class="nav justify-content-end">
          <li class="nav-item">
             <button>My buttons</button>
              <button>My buttons</button>
          </li>
             <li class="nav-item">
              <button>My buttons</button>
          </li>
             <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
          </li>
             <li class="nav-item">
            <a class="btn"> <img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
            </a>
          </li>
             <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
            </a>
          </li>
        </ul>
      </nav>

html css twitter-bootstrap

Answer 1

Answer №1

It's possible that I may not fully grasp your question, but if I do, then I believe I have the solution for you. You can achieve the desired effect by applying specific margins to the left and right "group" of the navbar. First, make sure to set the width of a div, each with a width of 20% (totaling 60%). The left div should have a margin-right of 20%, while the right div should have a margin-left of 20%. To center everything perfectly, set the text-align of the div to center. Feel free to test my code by clicking on the "run code snippet" button below:

.navBar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    background: #ccc;
    width: 100%;
    padding: 5px 0;
}

.navBar div {
    width: 20%;
    text-align: center;
}

.navBar div a  {
    margin: 0 4px;
    padding: 0 4px;;
    background: rgb(0, 0, 0);
    color: #fff;
    text-decoration: none;
}



.left {
    margin-right: 20%;
}

.right {
    margin-left: 20%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="navBar">
        <div class="left">
            <a class="btn" href="#">1</a>
            <a class="btn" href="#">2</a>
            <a class="btn" href="#">3</a>
        </div>

        <div class="center">
            <a href="#" class="btn">4</a>
            <a href="#" class="btn">5</a>
            <a href="#" class="btn">6</a>
        </div>

        <div class="right">
            <a href="#" class="btn">7</a>
            <a href="#" class="btn">8</a>
            <a href="#" class="btn">9</a>
        </div>
    </div>
</body>
</html>

To keep the navbar fixed at the top, I utilized "position: fixed," although "position: sticky" is also a valid alternative.

Answer 2

It's possible that I may not fully grasp your question, but if I do, then I believe I have the solution for you. You can achieve the desired effect by applying specific margins to the left and right "group" of the navbar. First, make sure to set the width of a div, each with a width of 20% (totaling 60%). The left div should have a margin-right of 20%, while the right div should have a margin-left of 20%. To center everything perfectly, set the text-align of the div to center. Feel free to test my code by clicking on the "run code snippet" button below:

.navBar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    background: #ccc;
    width: 100%;
    padding: 5px 0;
}

.navBar div {
    width: 20%;
    text-align: center;
}

.navBar div a  {
    margin: 0 4px;
    padding: 0 4px;;
    background: rgb(0, 0, 0);
    color: #fff;
    text-decoration: none;
}



.left {
    margin-right: 20%;
}

.right {
    margin-left: 20%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="navBar">
        <div class="left">
            <a class="btn" href="#">1</a>
            <a class="btn" href="#">2</a>
            <a class="btn" href="#">3</a>
        </div>

        <div class="center">
            <a href="#" class="btn">4</a>
            <a href="#" class="btn">5</a>
            <a href="#" class="btn">6</a>
        </div>

        <div class="right">
            <a href="#" class="btn">7</a>
            <a href="#" class="btn">8</a>
            <a href="#" class="btn">9</a>
        </div>
    </div>
</body>
</html>

To keep the navbar fixed at the top, I utilized "position: fixed," although "position: sticky" is also a valid alternative.

Answer 3

Answer №2

.topfixed{
    position: sticky !important;
    top: 0;
    z-index: 10;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar nabBarContainer topfixed">
        <ul class="nav divBtn">
          <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
          </li>   
        </ul>
        <ul class="nav justify-content-center divBtn">
          <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
          </li>   
        </ul>
        <ul class="nav justify-content-end divBtn">
          
             <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
            </a>
          </li>
        </ul>
      </nav>
      <div style="height:1000px;"></div>

To solve the issue with the header, you can simply apply this CSS class:

HTML

<nav class="navbar nabBarContainer topfixed">

CSS

.topfixed{
        position: sticky;
    top: 0;
    z-index: 10;
}

Uncertain about which buttons you want to center... there are a total of 8 buttons. How would you like them aligned?

Answer 4

.topfixed{
    position: sticky !important;
    top: 0;
    z-index: 10;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar nabBarContainer topfixed">
        <ul class="nav divBtn">
          <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
          </li>   
        </ul>
        <ul class="nav justify-content-center divBtn">
          <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
          </li>   
        </ul>
        <ul class="nav justify-content-end divBtn">
          
             <li class="nav-item">
            <a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
            </a>
          </li>
        </ul>
      </nav>
      <div style="height:1000px;"></div>

To solve the issue with the header, you can simply apply this CSS class:

HTML

<nav class="navbar nabBarContainer topfixed">

CSS

.topfixed{
        position: sticky;
    top: 0;
    z-index: 10;
}

Uncertain about which buttons you want to center... there are a total of 8 buttons. How would you like them aligned?

Answer 5

Answer №3

//To keep the navigation bar fixed:

position: fixed;

//To center an element:

margin: 0 auto;

//To position an element on the right side:

position: absolute;
right: 0;
top: 0;

//To position an element on the left side:

position: absolute; left: 0; top: 0;

Answer 6

//To keep the navigation bar fixed:

position: fixed;

//To center an element:

margin: 0 auto;

//To position an element on the right side:

position: absolute;
right: 0;
top: 0;

//To position an element on the left side:

position: absolute; left: 0; top: 0;

Centering the element on the navbar and ensuring its fixed position

Answer №1

Answer №2

Answer №3

Similar questions

Tips for positioning an MUI element inside a container to extend to the edge of the browser window

Manipulating a link within a span element with Puppeteer

"Finding the Perfect Alignment: How to Center Legends in Firefox

Creating an event within a class that is generated dynamically when hovering

Which HTML elements are compatible with the ng-disabled directive?

Toggle the div if the if statement is true; otherwise, hide the broken

Where can I find the specific code needed to create this button style?

navigating up and down html elements using css selectors

creating an animated loop within an Angular template

What is the solution for positioning an input or select element at the end of a tr element?

Mastering the fundamentals of integrating/augmenting a fresh template in Umbraco

displaying information using specific bootstrap pills

Use percentages for the width in CSS and pixels for the height, ensuring that both dimensions are equal

Detecting the existence of a scrollbar within the document object model using JavaScript - a guide

Javascript function that sets the opacity to 0

Exploring the inner workings of Viewstate

How is it possible that I am able to view the font on this particular website?

Modify the -webkit-text-stroke- hue using JavaScript

Stop browser from downloading attached file

How can I resize several images to fit seamlessly within a div container?