How to apply margin right to nav bar not affecting the navbar collapse using Bootstrap?

Question

Goal:

I am aiming to place the nav bar items to this position using padding or margin marked in red:

Problem

I realized if I apply some padding right or margin right, the collapsed (Mobile screen) li items are applied with margin right or padding-right.

Here is a ridiculous example of high padding applied:

Goal:

This is the desired output:

And finally, properly centered collapsed li items in responsive mode:

Code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
 }

.navbar {
  background-color: black !important;
}

.navbar .navbar-collapse li{
  text-align: center;
  margin-bottom: 20px;
}

.navbar-nav > li{
  padding-right:30px;
}

.navbar li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 70%;
  color: #000;
}

.navbar ul li a {
  position: relative;
  z-index: 1;
  padding: 15px;
}

Question

Whats a good solution to achieve my desired output?

user_13573444 · Answer

Add these media queries to the end of your css file and you will get the result you want. I added margin-right: 100px; at your discretion. You yourself can specify the number of pixels you need. And also added padding-right: 0; to remove indentation for mobile devices to better center the menu.

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
      margin-right: 100px;
  }
}

@media (max-width: 992px) {
  .navbar-nav > li {
      padding-right: 0;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
 }

.navbar {
  background-color: black !important;
}

.navbar .navbar-collapse li{
  text-align: center;
  margin-bottom: 20px;
}

.navbar-nav > li{
  padding-right:30px;
}

.navbar li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 70%;
  color: #000;
}

.navbar ul li a {
  position: relative;
  z-index: 1;
  padding: 15px;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
      margin-right: 100px;
  }
}

@media (max-width: 992px) {
  .navbar-nav > li {
      padding-right: 0;
  }
}

user_514878 · Answer

There are a few things you could do to achieve this:

As you were suggesting in your question, you can add margin to the right of your navbar, but you can apply this on larger screens only using media queries. The code below adds a media query that will only apply this CSS on screens of 992px or larger (the same point at which your navbar appears full width using Bootstrap's navbar-expand-lg class):

    @media (min-width: 992px) {
        #navbarMenu { margin-right: 200px; }       
    }

See working example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
 }

.navbar {
  background-color: black !important;
}

.navbar .navbar-collapse li{
  text-align: center;
  margin-bottom: 20px;
}

.navbar-nav > li{
  padding-right:30px;
}

.navbar li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 70%;
  color: #000;
}

.navbar ul li a {
  position: relative;
  z-index: 1;
  padding: 15px;
}

@media (min-width: 992px) {
    #navbarMenu { margin-right:200px;}
}

You could also simply set the max-width on your navbar, so that a variable amount of space gets added to both sides once the screen reaches the maximum with you have set, e.g.
```
nav { margin:auto; max-width: 400px; }
```

Because the navbar's background colour is added to nav, you will need to fill the rest of the screen with this colour using a wrapper class, or just use header in there is nothing else in it except the nav. We just need to add the Bootstrap bg-light class to match the nav bar, e.g.


    
        [rest of your code here...]

Using a wrapper has the added advantage of adding equal amount of space to both sides, and increasing the space the wider the screen gets. (Also, it might sound like overkill to add an extra wrapper, but it is actually a standard way of keeping consistent width on all content as you can reuse a wrapper on all your content, and as I said you might be able to use header)

See working example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
 }

.navbar {
  background-color: black !important;
}

.navbar .navbar-collapse li{
  text-align: center;
  margin-bottom: 20px;
}

.navbar-nav > li{
  padding-right:30px;
}

.navbar li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 70%;
  color: #000;
}

.navbar ul li a {
  position: relative;
  z-index: 1;
  padding: 15px;
}

nav { margin:auto; max-width: 400px; }

How to apply margin right to nav bar not affecting the navbar collapse using Bootstrap?

2 Answers