How to remove navbar rounded corners using border-radius property when using SASS for Ruby on Rails?

Question

I am new to programming and learning bootstrap through a course called One Month Rails. I want to remove the rounded corners on the inverse-navbar but am having a hard time. I have looked through both of the stackoverflow threads in the links below but still am having trouble.

Currently I have a file called "Bootstrap_and_customization.css.scss" and it has the following code:

$body-bg:   #95a5a6;
$border-radius: 0px;
@import 'bootstrap';

However, the border radius is still rounded. I hope I've provided enough information but I might not have so please let me know.

Thanks

===== Links:

Getting rid of all the rounded corners in Twitter Bootstrap

https://stackoverflow.com/questions/20926522/flat-ui-round-corners-css-html

score 89 · Answer 1 · answered Nov 12 '14 at 01:10

89

I will instead of modifying the css add the class: navbar-static-top

ie:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

or the class navbar-fixed-top, if you want the menu to be fixed on the top(on large pages)

ie:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

answered Nov 12 '14 at 01:10

Manza

2,109
1
27
34

This almost did the trick, but I have a navbar-right ul that is not getting positioned correctly (the text is flush against the rigth edge of the page). Everything else looks good. – lintmouse May 07 '15 at 18:36
2

Why do you have `role="navigation"` in a nav? – LostMikely Feb 12 '16 at 22:00
1

Hi Michael, this is what I found in the new bootstrap docs, hope it helps: add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies – Manza Feb 12 '16 at 23:52
1

I searched for this, came here, and it worked. A year later: I searched for this, came here, and it worked. Thank you, and thank you. :) – Jun 06 '17 at 03:31

score 26 · Answer 2 · edited Feb 12 '16 at 14:40

26

You used:

<nav class="navbar navbar-inverse">

Try using this instead:

<nav class="navbar navbar-inverse navbar-static-top">

and this will remove radius

edited Feb 12 '16 at 14:40

StackExchange What The Heck

2,656
7
39
51

answered Feb 12 '16 at 12:42

Haroon Patel - PK

261
3
3

– Haroon Patel - PK Feb 12 '16 at 12:42

score 15 · Answer 3 · answered Jan 06 '14 at 01:55

15

All you have done there is create a variable initialized to 0. I think you are best off letting Bootstrap do what it wants and then overriding what you want.

Try applying

* {
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

And of course make sure this style (and any other overriding styles) is included in your template files.

answered Jan 06 '14 at 01:55

Vidya

29,932
7
42
70

might want to account for webkit too: -webkit-border-radius: 0 !important; – Art Geigel Sep 18 '14 at 16:24

score 7 · Answer 4 · answered Apr 15 '15 at 03:41

On your class navbar you need to override the border-radius to 0px:

<nav class="navbar navbar-inverse" style="border-radius:0px;">

Since the html has priority over the CSS you'll be overriding the style without messing with the code.

In the other hand you could override all the "border-radius" that precede "navbar" in the "css/bootstrap.css"

Note: for border color I used: "border-color:transparent;"

score 5 · Answer 5 · answered Jun 22 '17 at 13:07

5

Hope this helps you.This worked for me.

<nav class="navbar navbar-inverse navbar-static-top" >

<!-- Content -->

</nav>

answered Jun 22 '17 at 13:07

krekto

1,403
14
18

score 4 · Answer 6 · answered Sep 08 '16 at 14:51

4

Just add class .navbar-full like this.

<nav class="navbar navbar-dark bg-inverse navbar-full" id="nav-main">

I dont know if this work for bootstrap 3, but you can give it a try.

answered Sep 08 '16 at 14:51

Yordan Ramchev

340
4
14

score 2 · Answer 7 · edited May 23 '17 at 12:18

This link has a similar question and was answered perfectly.

Bootstrap CSS can be huge and compressed. You can do 'inspect element' to find the location of the file in which the CSS property is present, then modify the parameters over there.

OR

You can write some internal CSS, i.e in the view file or application layout(If you want for all views).

In the head of the respective file write the following:

<style>
body {
background-color: #95a5a6;
border-radius: 0px;
}
</style>

If the above code does not work then you will have to specify the class of the div or element for which you want to have angle borders. In the head of the respective file write the following:

<style>
.class {
background-color: #95a5a6;
border-radius: 0px;
}
</style>

Note: Replace 'class' with a valid one.

score 2 · Answer 8 · answered Nov 11 '14 at 16:53

2

You should change the following bootstrap block:

@media (min-width: 768px) {
    .navbar {
         border-radius: 4px;
    } 
}

Just comment the border-radius property.

answered Nov 11 '14 at 16:53

Pablo

361
3
6

Ian Warner · Answer 9 · 2016-05-01T20:13:57.427

2

This is also a variable that can be built and downloaded or changed if you use LESS / SCSS

$navbar-border-radius: $border-radius-base !default;

edited May 01 '16 at 20:13

answered Aug 08 '15 at 17:19

Ian Warner

1,058
13
32

score 2 · Answer 10 · answered Jul 31 '17 at 17:34

2

.navbar{
border-radius:0 !important;
}

apply the style directly on the same element that contains navbar. !important will remove the style from bootstrap and make your stype more important.

answered Jul 31 '17 at 17:34

Bmuzammil

31
9

Sreelakshmi · Answer 11 · 2015-12-26T09:14:47.337

1

<style>
.navbar{
border-radius:0px;
}
</style>

Provide these codes before or after tags so that this will override the default property.Hope this helps you.This worked for me.

edited Dec 26 '15 at 09:14

answered Nov 30 '15 at 07:00

Sreelakshmi

31
3

score 0 · Answer 12 · edited Aug 13 '15 at 08:36

0

look for the .navbar-inverse and only add {border-radius:0px;} like this .navbar-inverse {border-radius:0px;}

edited Aug 13 '15 at 08:36

Robert

5,278
43
65
115

answered Aug 13 '15 at 08:14

Shahid Hussain

1

How to remove navbar rounded corners using border-radius property when using SASS for Ruby on Rails?

12 Answers12