The navigation bar buttons are aligned to the left and are configured to stack on smaller screen

My Navbar is giving me some trouble. It collapses on screens less than 768 pixels wide, but from 768 pixels onwards it acts strangely until it can fill the page properly: https://i.sstatic.net/jOVYX.png

I attempted to use nav-justified in the HTML, but it just causes each button to stack vertically.

Ideally, I am seeking a solution that doesn't look odd, however, I must keep every link in this menu so trimming them down is not an option.

I believe center-aligning everything would be the best approach so that if stacking is necessary, at least it will be centered.

Has anyone encountered this issue before?

htmlcsstwitter-bootstrap

Answer №1

Here are some solutions to address this issue.

1) Decrease the font size

2) Implement dropdown menus.

3) Include an additional (permanently visible) bar for commonly used links.

Check out the demonstration below.

.navbar.navbar-custom,
.navbar.navbar-custom2,
.navbar.navbar-custom3 {
  background: white;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid red;
}
/**NAV One**/

.navbar.navbar-custom .navbar-nav > li > a {
  font-size: 12px;
}
/**NAV Three**/

.navbar-default.nav-top {
  background: white;
  border-top: 3px solid red;
}
.navbar-default.nav-top ul {
  display: inline-block;
  float: right;
}
.navbar-default .navbar-top li {
  float: left;
  font-size: 12px;
}
.navbar-default .navbar-top li a {
  color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nv1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">NAV 1</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nv1">
      <ul class="nav navbar-nav">
        <li><a href="#">HOME</a>

        </li>
        <li><a href="#">TRAINING</a>

        </li>
        <li><a href="#">HEALTH</a>

        </li>
        <li><a href="#">SAFETY</a>

        </li>
        <li><a href="#">TRAINING CALENDAR</a>

        </li>
        <li><a href="#">ABOUT</a>

        </li>
        <li><a href="#">CONTACT</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-info">NAV One + Smaller Text</div>
<nav class="navbar navbar-default navbar-custom2">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nv2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">NAV 2</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nv2">
      <ul class="nav navbar-nav">
        <li><a href="#">HOME</a>

        </li>
        <li><a href="#">TRAINING CALENDAR</a>

        </li>
        <li><a href="#">ABOUT</a>

        </li>
        <li><a href="#">CONTACT</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SERVICES <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">TRAINING</a>

            </li>
            <li><a href="#">HEALTH</a>

            </li>
            <li><a href="#">SAFETY</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-danger">NAV Two + Dropdown</div>
<nav class="navbar-default nav-top">
  <div class="container-fluid">
    <ul class="nav navbar-top">
      <li><a href="#">ABOUT</a>

      </li>
      <li><a href="#">CONTACT</a>

      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-default navbar-custom3">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nv3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">NAV 3</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nv3">
      <ul class="nav navbar-nav">
        <li><a href="#">HOME</a>

        </li>
        <li><a href="#">TRAINING</a>

        </li>
        <li><a href="#">HEALTH</a>

        </li>
        <li><a href="#">SAFETY</a>

        </li>
        <li><a href="#">TRAINING CALENDAR</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-warning">NAV Three + Upper Links</div>

Answer №2

Is it possible to simplify this by adjusting the @media queries to a higher range, perhaps between 800-900 pixels? Should we also consider converting it into a dropdown menu as proposed by vanburenx?

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

Expanding an element to cover all columns in a grid with automatically generated columns

I am working on a CSS grid layout with automatic columns and 2 rows. All elements are normally placed in the first row except for one special element that should span both rows while filling all available column space. My current code looks like this: ...

csscss-grid

Creating this design using only HTML and CSS is possible by following these steps

I attempted to create this design using only HTML and CSS but unfortunately couldn't achieve it. Can anyone provide me with some assistance? Thank you in advance Check out the image on imgur.com ...

htmlcss

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...

javascriptjqueryhtmlcssimage

Continue extending the footer as the screen size decreases

Could anyone offer some assistance? I'm currently working on a project and facing issues with getting the footer to always be pushed down as the screen size decreases. As of now, my content is going under the footer instead. Any help would be greatly ...

htmlcssfooter

Adjusting the height of the Bootstrap 4 right side navbar to fill the entire screen

Here is the code for my Bootstrap 4 navbar. I am attempting to make the right side navbar height reach full 100%. <nav class="navbar navbar-expand-sm bg-light navbar-light" style="width: 200px; float: right;"> <ul ...

htmlcsstwitter-bootstrapbootstrap-4nav

What is preventing npm sass from compiling properly?

https://i.stack.imgur.com/ekbNW.png While making edits to my code, I've noticed that the sass-compiler isn't indicating any errors (red lines) or successful compilations (green lines). Can someone help me identify where I might be going wrong? ...

htmlcssnpmsass

What is the best way to adjust the width of a div based on the remaining space in the viewport?

I've created a Wireframe to showcase the concept I'm aiming for. There are 2 screens included to illustrate how the layout should adapt to different screen sizes. Check out the Wireframe here The goal is to have a center-aligned container named ...

htmlcsslayoutflexboxresponsive-design

What is the best way to organize the size of multiple files into a single HTML card?

Is there a way to automatically arrange multiple items (photos/videos) within a single HTML card, similar to how it is done on Facebook or Instagram? I am looking for a library or JavaScript code that can help me achieve this without extending the size of ...

javascripthtmljquerydjangobootstrap-4

What is the best way to implement a function on every item within a specific class?

I'm new to coding and I have a website that showcases job listings. I want to create a function that dynamically changes the logo of a company based on the first 50 characters of the company name mentioned. The current function only works for the firs ...

javascripthtml

Unable to generate the 'validator' property on the string 'userForm' while utilizing the component factory

Currently, I am in the process of creating a component factory to generate my login form dynamically. Initially, I encountered an issue where the FormGroup was not recognized by the form where I was introducing my component. After resolving that with the h ...

htmlangulartypescriptangular-reactive-forms

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

htmlcss

Modification of encapsulated class in Angular is not permitted

Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...

cssangular

Adjusting the arrangement of div elements based on screen dimensions or orientation within an Ionic grid system

My HTML setup looks like this: <div class="row"> <div class="col-sm-12 col-md-6 col-xl-3"> </div> <div class="col-sm-12 col-md-6 col-xl-3"> </div> <div class="col-sm-12 col-md-6 col-xl-3"> </d ...

htmlcsstwitter-bootstrapionic-framework

What is the best way to animate various sprites using distinct buttons in HTML and CSS?

I've been experimenting with animating a sprite by using different onClick button triggers. I encountered an issue where only one of the buttons works correctly in the fiddle. However, in my local file version, the other buttons work but only once and ...

javascriptjqueryhtmlcssanimation

Adding a CSS style to a specific child element

Here is an example snippet <html> <head> <style> .test > input { //this selector is incorrect. color:red; } </style> </head> <body> <div class="test"> <di ...

htmlcss

Ways to create a click event in jQuery?

One challenge I have is regarding a select input with the id "slt". I aim to extract the innertext of the selected value and then assign this text to another div. Initially, I was able to obtain the value with a specific code. However, now my goal is to cr ...

jqueryhtml

Enhance the slider's worth

Hey there, just wanted to mention that I didn't write this code myself. Another person did, and I'm a bit lost trying to figure out how to assign values to the three sliders. I don't want a default value; I want each slider to take its value ...

javascriptjqueryhtmlslider

Dynamic input fields with autocomplete functionality

I have attempted to implement the solutions provided elsewhere on this specific issue, but unfortunately they do not seem to be working for me. It is highly probable that I am making some mistake in my approach... My main objective is to achieve what is me ...

jqueryhtml

Why is the bootstrap modal not showing up when editing the data?

I am currently working on a Blazor application with .NET Core 7. I am facing an issue where the Bootstrap modal does not display as active when clicking the edit button. When trying to edit data using the Bootstrap modal, the modal does not display as act ...

jquerycssbootstrap-modalbootstrap-5blazor-server-side

Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue. <div class="notification" [ngClass]="{'no ...

htmlcssangularformstext