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

Solution 1

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">

Solution 2

You used:

<nav class="navbar navbar-inverse">

Try using this instead:

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

and this will remove radius

Solution 3

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.

Solution 4

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

Solution 5

Hope this helps you.This worked for me.

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

<!-- Content -->

</nav>

View more solutions