CODEWITHSUNDEEP
cssruby-on-railsrubytwitter-bootstrap
Faique Moqeet
Faique Moqeet

Reputation: 569

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

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

Upvotes: 39

Views: 94994

Answers (12)

Bmuzammil
Bmuzammil

Reputation: 31

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

Upvotes: 2

krekto
krekto

Reputation: 1487

Hope this helps you.This worked for me.

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

<!-- Content -->

</nav>

Upvotes: 5

Yordan Ramchev
Yordan Ramchev

Reputation: 340

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.

Upvotes: 4

Ian Warner
Ian Warner

Reputation: 1068

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;

Upvotes: 2

Haroon Patel - PK
Haroon Patel - PK

Reputation: 261

You used: 

<nav class="navbar navbar-inverse">

Try using this instead: 

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

and this will remove radius

Upvotes: 26

Sreelakshmi
Sreelakshmi

Reputation: 31

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

Upvotes: 1

Shahid Hussain
Shahid Hussain

Reputation: 1

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

Upvotes: 0

Theo Leinad
Theo Leinad

Reputation: 115

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

Upvotes: 7

Manza
Manza

Reputation: 2141

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

Upvotes: 89

Pablo
Pablo

Reputation: 391

You should change the following bootstrap block:

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

Just comment the border-radius property.

Upvotes: 2

Shine Cardozo
Shine Cardozo

Reputation: 487

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.

Upvotes: 2

Vidya
Vidya

Reputation: 30320

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.

Upvotes: 15

Related Questions