• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Contributor ,
Jun 04, 2023 Jun 04, 2023

Copy link to clipboard

Copied

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

 

Screenshot 2023-06-04 at 5.30.24 PM.pngScreenshot 2023-06-04 at 5.31.17 PM.png

TOPICS
Bootstrap , Code

Views

262

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jun 07, 2023 Jun 07, 2023
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 wh
...

Votes

Translate

Translate
Community Expert ,
Jun 04, 2023 Jun 04, 2023

Copy link to clipboard

Copied

Bootstrap 4.5 navigation looks fine to me in Firefox. 

 

image.png

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 05, 2023 Jun 05, 2023

Copy link to clipboard

Copied

Did I do something specfically wrong in my design?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 06, 2023 Jun 06, 2023

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 07, 2023 Jun 07, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 05, 2023 Jun 05, 2023

Copy link to clipboard

Copied


@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

 

Screenshot 2023-06-04 at 5.30.24 PM.pngScreenshot 2023-06-04 at 5.31.17 PM.png


 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 09, 2023 Jun 09, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 09, 2023 Jun 09, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 10, 2023 Jun 10, 2023

Copy link to clipboard

Copied

LATEST

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 09, 2023 Jun 09, 2023

Copy link to clipboard

Copied

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines