DMXzone Bootstrap 3 Navigation Support Product Page
Answered
Header above navbar
Asked 12 Mar 2015 14:43:34
1
has this question
12 Mar 2015 14:43:34 David Woolley posted:
What is the best and easiest way to put a header above the menu like you have in the Extreme Sports showcase, so the header content is fixed by the container width, which should be the same as for the navbar and the content. The header background image/color and the navbar wrapper should be 100% across the page like in the showcase.I tried to follow the structure of the showcase in Firebug, but not that apparent ...
All the other showcases have the navbar at the top of the page.
Cheers
Dave
Replies
Replied 12 Mar 2015 14:56:08
12 Mar 2015 14:56:08 Teodor Kuduschiev replied:
Hello David,
There is nothing special about this... you can do it the same way as you insert any container on your page.
Just place the header container before the navigation container...
<header> your header</header>
<nav>your nav</nav>
There is nothing special about this... you can do it the same way as you insert any container on your page.
Just place the header container before the navigation container...
<header> your header</header>
<nav>your nav</nav>
Replied 12 Mar 2015 18:31:32
12 Mar 2015 18:31:32 David Woolley replied:
Thanks Teodor - however the Extreme Sports example has the <header> wrapped around the <nav> like so:
<body data-spy="scroll" data-target=".nav-container">
<header id="header">
<div id="page-title" class="hidden-xs">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Xtreme Club</h1>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
<nav id="top-nav" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="nav-container container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-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 href="#" class="navbar-brand visible-xs-block hidden-sm hidden-md hidden-lg">
Xtreme Club
</a></div>
<div class="collapse navbar-collapse" id="bs3-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Events</a></li>
<li><a href="index.html">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
</header>
with CSS:
#page-title {
background: url("../img/1sllvjsr.jpg"
no-repeat scroll center center / cover rgba(0, 0, 0, 0);
padding: 60px 0;
position: relative;
}
#page-title h1 {
color: #fff;
font-size: 32px;
line-height: 32px;
margin: 0;
padding: 0;
position: relative;
text-transform: uppercase;
z-index: 1;
}
<body data-spy="scroll" data-target=".nav-container">
<header id="header">
<div id="page-title" class="hidden-xs">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Xtreme Club</h1>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
<nav id="top-nav" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="nav-container container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-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 href="#" class="navbar-brand visible-xs-block hidden-sm hidden-md hidden-lg">
Xtreme Club
</a></div>
<div class="collapse navbar-collapse" id="bs3-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Events</a></li>
<li><a href="index.html">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
</header>
with CSS:
#page-title {
background: url("../img/1sllvjsr.jpg"
no-repeat scroll center center / cover rgba(0, 0, 0, 0);padding: 60px 0;
position: relative;
}
#page-title h1 {
color: #fff;
font-size: 32px;
line-height: 32px;
margin: 0;
padding: 0;
position: relative;
text-transform: uppercase;
z-index: 1;
}
Replied 13 Mar 2015 11:34:47
13 Mar 2015 11:34:47 Teodor Kuduschiev replied:
Yes it is, but i still cannot understand what is the issue you are having?
Replied 13 Mar 2015 13:58:39
13 Mar 2015 13:58:39 David Woolley replied:
I've sorted it out Teodor.
The <nav> has to be inside the <header> tag like so:
<header>
header content
<nav>
navbar
</nav>
</header>
I assigned the <header> a class for the background color & image so it spreads 100% across the page.
Then assigned each container to be fixed, so the content of each container is centered on the page.
The navbar background color covers the header background color & image.
Cheers
Dave
The <nav> has to be inside the <header> tag like so:
<header>
header content
<nav>
navbar
</nav>
</header>
I assigned the <header> a class for the background color & image so it spreads 100% across the page.
Then assigned each container to be fixed, so the content of each container is centered on the page.
The navbar background color covers the header background color & image.
Cheers
Dave