In Bootstrap how can I edit CSS only for the mobile menu?

Question

So I want to apply some CSS only for the mobile (hamburger) menu. I guess you could do something like an @media screen and (max-width: 600px) style for the width where it changes, but that seems messy.

Is there a style that relates only to the mobile menu? That way I could do something like:

.mobile-menu .nav-link {
  colour: red;
  padding: 40px;
}

to make only the mobile menu red and padded to 40px, and the desktop menu will remain normal. If there is no set style, what is the best way to create CSS that will affect only mobile menu items?

To help, here is the html code:

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand" href="#">
    <img class="img-fluid d-md-none" src="images/banner_logo_small.png">
    <img class="img-fluid d-none d-md-block" src="images/banner_logo.png">
  </a>
  <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">HOME</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">COMMUNITY SUPPORT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

And here is the code in the .css:

.navbar {
  background:#FF8200;
  padding: 0;
}
.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.nav-link {
  margin-right: 1em !important;
  font-weight: bold;
}
.nav-link:hover {
  color: #3D3935;
}
.navbar-collapse {
  justify-content: flex-end;
}
.d-md-none .navbar-collapse {
  padding: 200px;
  color: red;
}

So the aim at the moment is to make just the items in the mobile menu have a padding of 200px and to turn red.

Here is a sample: https://www.codeply.com/p/uVOV67zz6E to play with, with the aim of the menu items in mobile to turn red and in desktop view stay white.

The issue of course is in Bootstrap its the same items in the mobile and desktop menu, bootstrap just changes the css based on page width.

AspiringDeveloper · Answer 1 · 2020-08-07T06:05:50.357

Try something like this:

(I've added background-color: green; to the navbar and added padding: 40px to the navbar-togger-icon.)

(A good resource for other modifications you might want to do: Bootstrap 4 Change Hamburger Toggler Color & https://getbootstrap.com/docs/4.0/components/navbar/#color-schemes)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-light" style="background-color: green;">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon" style="padding: 40px;"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <script src="script.js"></script>
</body>

</html>

I have now added all the code to the original post. The question you linked to here I have seen, but its aimed at editing the icon, not the actual menu items, I can't work out how to use that method for the actual items. — MicWit, Aug 07 '20 at 05:39
I modified my answer. I was doing various tests but the one I generated above seems to be working as intended. — AspiringDeveloper, Aug 07 '20 at 05:56
If you go to https://www.codeply.com/p?starter=Bootstrap%204 and copy the html and css codes into the first and last windows to test, then you can try modify the css and have it so the mobile view will be spread apart and change text color from the desktop one. — MicWit, Aug 07 '20 at 06:25
You are right, my sample code is broken. The responsiveness is gone however the code itself is still relevant to your question. Here is a sample of the navbar being manipulated: https://ivoryvoluminousenvironments--five-nine.repl.co/ — AspiringDeveloper, Aug 07 '20 at 06:31
That link is the default behaviour, go to https://www.codeply.com/p/uVOV67zz6E and see what I have so far. Toggle between desktop and mobile/tablet view. The aim will be to modify the CSS section to make the menu items in only the mobile/tablet views to change color (the desktop stay the same). — MicWit, Aug 07 '20 at 06:34
I'm sorry for not understanding what you wanted earlier. I know you were trying to avoid media queries but this is honestly the best option for now: ```@media (min-width: 768px) { .navbar { background:green; } }``` — AspiringDeveloper, Aug 07 '20 at 06:48
So is 768px where it changes to the hamburger menu? Has this always been the way in Bootstrap and is it not likely to change? Would suck if something like that changed and broke my site when I upgrade to the latest version! — MicWit, Aug 07 '20 at 06:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219388/discussion-between-aspiringdeveloper-and-micwit). — AspiringDeveloper, Aug 07 '20 at 06:53

In Bootstrap how can I edit CSS only for the mobile menu?

1 Answers1