CODEWITHSUNDEEP
htmltwitter-bootstrap
Bayu Anggara
Bayu Anggara

Reputation: 287

Bootstrap - Remove navbar border radius

I made a footer with this following HTML:

<nav class="navbar navbar-inverse navbar-bottom">
     <div class="container">
           <p class="navbar-text pull-left">Copyright &copy; OLShop.com 2016</p>
           <ul class="nav navbar-nav navbar-right">
               <li><a href="register_form.php">About Us</a></li>
               <li><a href="register_form.php">Twitter</a></li>
               <li><a href="register_form.php">Facebook</a></li>
               <li><a href="register_form.php">Instagram</a></li>
           </ul>
       </div>
</nav>

Everything worked perfectly when I set it to fixed. But when I set footer to be not fixed, it wasn't located at the bottom of the page (floating) and had border radius. How to set it to the bottom of the page (not fixed) and remove the border-radius?

Any guidance will be very much appreciated.

Upvotes: 0

Views: 1531

Answers (3)

Ricardo Fiorani
Ricardo Fiorani

Reputation: 782

How to put it down to the bottom of page (not fixed)?

You can just put it's html in the right place (probably inside a footer tag).

JsFiddle : http://jsfiddle.net/nnndfcad/1/

Or you can use an absolute positioning like @santon's answer explained. But I highly disapprove this type of approach.

How to remove the border-radius?

According to your code, a simple

.navbar-inverse {
     border-radius: 0px;
}

Should solve it.

Upvotes: 0

Joe Kdw
Joe Kdw

Reputation: 2261

It's simple. Just try this:

<nav>
     <div class="container">
           <p class="navbar-text">Copyright &copy; OLShop.com 2016</p>
           <ul class="text-center inline-me">
               <li><a href="register_form.php">About Us</a></li>
               <li><a href="register_form.php">Twitter</a></li>
               <li><a href="register_form.php">Facebook</a></li>
               <li><a href="register_form.php">Instagram</a></li>
           </ul>
       </div>
</nav>

in Custom CSS, add this:

ul.inline-me li a {display:inline; padding-right:4px;}

Hope that helps.

Upvotes: 0

santon
santon

Reputation: 1834

You need to position the nav at the bottom of the page with CSS positioning. Refer to my earlier post on positioning. Also you should override the media query from bootstrap to remove border-radius.

I have attached a code snippet but it will not work in this form. You should copy the HTML code and a create a new external stylesheet using the CSS styles in the snippet and then add it after bootstrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="stylesheet.css"/>


footer {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}

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

.navbar{
     margin-bottom:0;
     bottom:0;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
    <nav class="navbar navbar-inverse navbar-bottom">
        <div class="container">
            <p class="navbar-text pull-left">Copyright &copy; OLShop.com 2016</p>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="register_form.php">About Us</a></li>
                <li><a href="register_form.php">Twitter</a></li>
                <li><a href="register_form.php">Facebook</a></li>
                <li><a href="register_form.php">Instagram</a></li>
            </ul>
        </div>
    </nav>
</footer>

Upvotes: 1

Related Questions