Skip to main content
default0vaokg78cv42
Inspiring
June 4, 2023
Answered

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

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 is closed to new replies. Start a new post to keep the conversation going.
osgood_Correct answer
Legend
June 7, 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).

 

 

 

 


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

9 replies

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.

Translate
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?

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

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

Bootstrap 4.5 navigation looks fine to me in Firefox. 

 

 

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

Did I do something specfically wrong in my design?

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

 

 

 

 

Translate
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