Skip to main content
D
default0vaokg78cv42
Inspiring
June 4, 2023
Answered

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

  • June 4, 2023
  • 2 replies
  • 844 views

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

 

This topic has been closed for replies.
Correct answer osgood_
quote

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).

 

 

 

 


quote
quote

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;
}

2 replies

O
osgood_
Legend
June 5, 2023
@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.

D
default0vaokg78cv42Author
Inspiring
June 9, 2023

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?

O
osgood_
Legend
June 9, 2023
quote

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.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 5, 2023

Bootstrap 4.5 navigation looks fine to me in Firefox. 

 

 

Nancy O'Shea— Product User & Community Expert
D
default0vaokg78cv42Author
Inspiring
June 5, 2023

Did I do something specfically wrong in my design?

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 6, 2023
quote

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).

 

 

 

 

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices