Collapsed navbar menu border

1

Hi, so I’m trying to change the border color of my “hamburger” menu (it’s currently light grey) when it’s collapsed on smaller screens but I can’t seem to get it to work. I’ve tried targeting it with different classes but no luck. Does anyone know how I might go about it? Project: https://codepen.io/MarcelPenn/pen/LwzRaj?editors=1100

2

I’ve had other problems setting certain colors in older versions of frameworks like and including Bootstrap. The used to be buried deep and sometimes overwritten multiple times from different files. the inspector refers me to _nabar.scss I think there are other files involved because there are so many variable names here but where does the theme actually set a color?

It might be easier to go back to bootstraps themer and customize this one thing.

Or dive into the unminified css sources and find the theme colors.

3

Thanks, I’ll have to dig in to a little more I guess. Some default bootstrap thing I imagine.

4

Can I edit the bootstrap default settings if I’m not hosting bootstrap locally do you know?

5

That sounds sensible. I only saw references to a light and dark theme in the above mentioned file. The basic colors for your menu icon were transparent. then after that were variable names referring to the theme. I didn’t dive into the minified file just the nicely formatted file that the inspector gave me.

I thought perhaps bootstrap might have some common alternatives with unique URLs from the themer to which to link.

1 Like
6

Hi @MarcelPenn,
What I did was change the class of your button from .navbar-toggler to .navbar-toggle and then in CSS specified;

.navbar-toggle {
  border-color: red;
}

and got the red border.

Or, keeping the class name the same, you can do this;

.navbar-toggler {
  border-color: red !important;
}

There’s a difference between ‘navbar-toggler’ and ‘navbar-toggle’ but someone smarter than me will have to explain it.

2 Likes
7

Oh hey that’s a great solution. I tried to target it with the “navbar-toggler” class but never thought to add the !important. I went with that code and it works beautifully. Thanks!

1 Like
8

You’re welcome. Glad I could help.

1 Like
9

Just FYI. If you load the bootstrap CSS using the Codepen Settings (and remove it from the HTML) then your selector on line: 85 would work and you would be able to set the color there (with no need for !important).

10

Yeah, I try not to use the built in codepen stuff though so I don’t run into issues if I export it elsewhere.

11

@lasjorg, thanks for pointing that out. I know codepen has some idiosyncrasies but didn’t know that one.

1 Like