Bootstrap - Navbar and footer with same structure - html

I'm new to Bootstrap and I want to have my navbar and footer with the same structure, it means colors and font family mainly, I've took code from Bootstrap themes for each of and from different sources, I've done the navbar part and I now want the footer to be with same structure but I don't understand how to do it.
Navbar part:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> ACCUEIL </li>
<li> BOUTIQUE </li>
<li> CONTACT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> MON COMPTE </li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange"> <span class="glyphicon glyphicon-lock" ></span> </button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
Footer part:
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4>Information</h4>
<ul class="nav">
<li>Products</li>
<li>Services</li>
<li>Benefits</li>
<li>Developers</li>
</ul>
</div>
</div>
</div>
</footer>
Here's what I want to have :
Thanks for the help !

You could use your own stylesheet, which overrides the bootstrap one. Just put this in the head section
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
To modify or apply additional styling to your web page, simply add the proper code to your custom.css file. There is no need to edit any of the original Bootstrap styles directly.
For example, if you decided that you did not like the rounded corners on the buttons, you could apply the following style in your custom.css file.
.btn {
border-radius: 0px;
}
Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded. This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.
source: https://bootstrapbay.com/blog/customize-bootstrap/

Related

Included header.html using jQuery and lost CSS formatting

I have a simple static HTML site with a header.html file I'd like to reuse on each of the pages. I followed the suggestion from how to load header and footer before the content using jquery.load() which appeared to work but caused the drop-down on hover no longer function (must be clicked). The top is the navbar using jQuery.load, the bottom is identical code placed inline within my index.html. My css and js files are all included in my index.html file, not in the header.html file. Any thoughts on why this is occurring?
In my header, I have the code below:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
..and to include the header/footer I have:
<div id="header"></div>
Contents of my current header.html file:
<section class="header-uper">
<div class="container clearfix">
<div class="logo">
<figure>
<a href="index.html">
<img src="images/logo.png" alt="" width="250em">
</a>
</figure>
</div>
<div class="right-side header-padding">
<ul class="contact-info">
<li class="item">
<div class="icon-box">
<i class="fa fa-envelope-o spacer"></i>
</div>
<strong>Email</strong>
<br>
<a href="#">
<span>customer email</span>
</a>
</li>
<li class="item">
<div class="icon-box">
<i class="fa fa-phone spacer"></i>
</div>
<strong>Call Now</strong>
<br>
<span>customer #</span>
</li>
</ul>
</div>
</div>
</section>
<header class="navbar navbar-default">
<div class="container">
<div class="HeaderRow">
<div class="col-md-12">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar">
<li class="active">Home</li>
<li class="dropdown">
Our Practice <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Dr. Eaton</li>
<li>Staff</li>
<li>Our Office</li>
<li>Services</li>
</ul>
</li>
<li class="dropdown">
Education <span class="caret"></span>
<ul class="dropdown-menu">
<li>Eye Education</li>
<li>Covid 19 Safety Plan</li>
</ul>
</li>
<li>Optical</li>
<li>Insurances</li>
<li>Forms & Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
Reposting as an answer for that lucrative reputation...
You state that you are loading content into here:
<div id="header"></div>
It sounds like this is adding a new element into the DOM, which may break your CSS selector specifications if you're not ready for a div#header to appear in the middle of them. I'd look here first.
The other issue is that the DOM is going to be ready and the <header> will not have been loaded yet. You're then using jQuery to load new elements into the DOM, and those elements may still need to be initialized once the DOM has finished loading the new HTML.

Why am I getting too much pixels for padding using Twitter Bootstrap?

I have made a header prototype using bootstrap. The problem is I couldn't understand why I have such big padding for the right side. If I add one more letter after Корзина HTML gives me a new line. How could I get rid of this free space? Here is the image
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Navigation -->
<!-- Heading beginning -->
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-2"><img src="http://placehold.it/75x75" id="nttLogo"></div>
<div class="col-md-8">
<input type="text" name="searchPattern" placeholder="Введите название лекарства, или препарата" id="searchForm">
<button type="button">Search</button>
<span class="glyphicon glyphicon-heart-empty"><p id="websiteSlogan">Отложенное </p></span>
<span class="glyphicon glyphicon-folder-open"><p id="websiteSlogan">Корзина</p></span>
</div>
<div class="col-md-8">
<small>Например, лекарства для диабетиков</small>
</div>
</div>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
<!-- Heading end-->
</body>
You need to increase the col-md-8 to col-md-10 and float the elements to right to remove empty space from right.
here is the updated demo

how can I change the content of a fixed header between sections of a site

I have a site with a single page. The site has seven sections.
The header is fixed, but I would like to change some of its contents in each of the sections .
Any suggestion?
Hugs from Sao Paulo / Brazil
My code
<div class="section"id="home">
<header class="navbar navbar-inverse navbar-fixed-top grid_12 ">
<div class="container col-xs-2 fundo_branco ">
<div class="navbar-header">
<!-- responsive nav button left-->
<button type="button" class="navbar-toggle-left float-left" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x"></i>
</button>
<!-- /responsive nav button left-->
</div>
<!-- main nav left -->
<nav class="collapse navbar-collapse navbar-left sobe" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li><img src="assets/img/logo_menu.png" alt=""></li>
<li >HOME</li>
<li>WELCOME</li>
<li>TOP DRINKS</li>
<li>PORTFOLIO</li>
<li>HELP!BLOG</li>
<li>FRANCHISE</li>
<li>CONTATO</li>
</ul>
</nav>
<!-- /main nav left-->
</div>
<div id="header" class="container col-xs-3"> <!-- Sugestion#Snappawapa-->
<h1>Section 1</h1>
</div>
<div class="container col-xs-2 col-md-offset-5">
<div class="navbar-header">
<!-- responsive nav button right -->
<button type="button" class="navbar-toggle float-right" data-toggle="collapse" data-target=".navbar-collapsea">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-square-o fa-2x"></i>
</button>
<!-- /responsive nav button -->
</div>
<!-- main nav right-->
<nav class="collapse navbar-collapsea navbar-left desce" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li>
<a href="#features">
<img src="assets/img/bloco1.png" alt="">
</a>
</li>
</ul>
</nav>
<!-- /main nav right-->
</div>
</header>
</div>
I need in each section change the contents of this div in section #welcome
<div class="container col-xs-3">
<h1>Welcome!</h1>
</div>
Code Section #welcome in this page
<div class="section" id="welcome">
<script>
document.getElementById("header").innerHTML = "<h1>Welcome</h1>";
</script>
This is works, but in the section home changes also.
I want to keep this header for each section. Example:
in section welcome
header=<h1>Welcome</h1>
in section top-drinks
header=<h1>Top drinks</h1>...
JavaScript would probably help you out. Give it an id:
<div id="header" class="container col-xs-3">
<h1>Este conteúdo muda em cada seção!!!!</h1>
</div>
Then you can use some JavaScript to change the contents of it:
document.getElementById("header").innerHTML = "<h1>New Header</h1>";
You could use different events on elements in the page to change it by putting that code in a function:
HTML:
<li >HOME</li>
JavaScript:
function changeHeader(newStuff){
document.getElementById("header").innerHTML = newStuff;
}
Hope this helps

Bootstrap navbar href to another page does not work

li href with '#' works fine but I'd like to write url of the another page. I tried to add some divs, forms or btn from bootstrap but that solution makes my page messy(unexpected margins or something strange).
I have no idea how to solve the problem.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="wow fadeInRight" data-wow-duration="2s">
<a class="navbar-brand" href="#home"></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<!-- Sklep -->
<li>Sklep
</li>
<!-- SOCIAL -->
<li style="padding-top:9px; margin-left:50px;">
<a href="https://www.facebook.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/facebook-2-32.png" alt="">
</a>
<a href="https://www.youtube.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/youtube-2-32.png" alt="">
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I don't completely understand your question, however when I have formatting issues with href tags, I tend to use JavaScript:
<div onclick="http://ebay.com" />
Perhaps if you explain your question a little better I may be able to help.

Bootstrap with collapsable nav - what I get doesn't match the docs

Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block