Bootstrap navbar: carets display well in chrome but not in Firefox and safari

[default0vaokg78cv42]

can this be corrected? In chrome they look good. In firefox and safari they look smooshed. Please see photos. appreciate any advice.

code can be found here www.drct.com

[Nancy OShea]

Bootstrap 4.5 navigation looks fine to me in Firefox. 

[default0vaokg78cv42]

Did I do something specfically wrong in my design?

[Nancy OShea]

Did I do something specfically wrong in my design?

By @default0vaokg78cv42

========

I don't know.  When I disable your footer.css, the navbar carets revert to their expected size.  So something in your footer.css is conflicting with Bootstrap's default styles.  Comment out style rules, one-by-one until you find the culprit(s).

[osgood_ · Accepted solution]

Did I do something specfically wrong in my design?

By @default0vaokg78cv42

========

I don't know.  When I disable your footer.css, the navbar carets revert to their expected size.  So something in your footer.css is conflicting with Bootstrap's default styles.  Comment out style rules, one-by-one until you find the culprit(s).

By @Nancy OShea

Yup, it only seems to affect the Firefox browser though (Mac), the carets look ok in Chrome and Safari (Mac)

It's the below css selector in the footer.css which is causing the issue.

ul {
list-style-type: disc;
text-indent: 20px;
}

Targeting the ul in the footer-info resolves the issue:

.footer-info  ul {
list-style-type: disc;
text-indent: 20px;
}

[osgood_]

---

@default0vaokg78cv42 wrote:

can this be corrected? In chrome they look good. In firefox and safari they look smooshed. Please see photos. appreciate any advice.

code can be found here www.drct.com

---

Looks ok in Safari browser on Mac to me - all of the carat is showing.

[default0vaokg78cv42]

Thanks very much. I did try that. the carrots were normal, but the menu items are now compacted together. Is there any way to increase the spacing?

[osgood_]

Thanks very much. I did try that. the carrots were normal, but the menu items are now compacted together. Is there any way to increase the spacing?

By @default0vaokg78cv42

I don't even know why you have the following css selector in the footer.css file?

ul {
list-style-type: disc;
text-indent: 20px;
}

As far as I can see you dont have a <ul> in the footer-info div, what happens if you just remove it?

Boostrap is Bootstrap, if you have followed the 'coloring by numbers workflow' then your nav items should be spaced the a same across all browsers.

[default0vaokg78cv42]

I used that for a list I oringally created in the footer. I was just starting out, at that time. There are more than one numbskull classes in my code. Live and learn. I was thinking about adding another class in the navbar that spaces the elements out by 10px. Thanks for your aritcle on SASS, that was useful. 

[Nancy OShea]

To target .navbar elements, use more specific selector names.

Experienced users customize Bootstrap Themes with SASS variables & mixins.

https://bootstrap.themes.guide/how-to-customize-bootstrap.html