0

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.

santon
  • 1,654
  • 16
  • 26
Bayu Anggara
  • 287
  • 2
  • 4
  • 13

3 Answers3

1

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>
Community
  • 1
  • 1
santon
  • 1,654
  • 16
  • 26
  • Refer to my earlier post on footer positioning here http://stackoverflow.com/questions/33181231/css-code-not-being-applied-to-divs/33181463#33181463 – santon Oct 21 '15 at 02:37
0

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.

Joe Kdw
  • 2,245
  • 1
  • 21
  • 38
0

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.

Ricardo Fiorani
  • 803
  • 1
  • 7
  • 19