I want to make a translucent mask appear over the content when I open the navbar.
Here is my code:
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse"">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
About
<ul class="dropdown-menu">
<li>What</li>
<li>How</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class= "content">
<div class = "container">
<div class = "row">
<div class="col-sm-10">
Enter Text Here
</div>
</div>
</div>
Is there a way to do this using just css?
Something like sibling selector if class is added to active nav item?
nav.active + .content {
display: block;
width: 100%;
height: 100%;
content: " ";
position: absolute;
background: rgba(0,0,0,0.6);
left: 0;
top: 0;
z-index: 999;
}
Related
I'm trying to make sidebar fixed in bootstrap along with navbar and header.
I have the following structure:
<html>
<head>...</head>
<body>
<div class="page-header custom-header">
<center>
<h1>Example Page Header</h1>
</center>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
....
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<div class="container-fluid">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<br/><br/><br/>
<div id="page-content-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:lavender;">...</div>
<div class="col-xs-7" style="background-color:lavenderblush;">...</div>
<div class="col-xs-6" style="background-color:lavender;">...</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The sidebar and navbar can be made fixed, while with header I face problems. If navbar is fixed, header is scrolled down with the content. I tried adding
top: 0;
position: fixed;
But it only resulted in sidebar overlapping the header.
Here is my jsfiddle. Any help is appreciated.
Here is a good start by changing the following CSS:
.page-header {
padding: 20px 0 20px;
border-bottom: 1px solid #eee;
position: fixed;
top: 0;
margin: 0;
background: #fff;
width: 100%;
display: block;
z-index: 1;
}
#wrapper.toggled {
padding-left: 250px;
margin-top: 100px;
}
It will still take some adjusting to the different viewports, start with the mobile then style up.
https://jsfiddle.net/fyzyc54k/4/
float: left;
and
display: inline;
are both failing to work.
What am I doing wrong? How can I make this navigation bar horizontal?
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
put your css inside style tags or an external css file and include it in the header section of your html
<style>
ul li{ display: inline;}
</style>
try the following code snippet, it might help you
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
list-style-type : none;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About </li>
<li id="navbar" class="active">Portfolio </li>
<li id="navbar" class="active">Contact </li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Changed
.navbar li {
to
li.navbar {
li.navbar {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
Is this what you are looking for?
Solved:
The
<li id="navbar" class="active">Home</li>
elements need the corresponding CSS to be
#navbar
and NOT
.navbar li
.navbar li should be used in the CSS for the html class attribute class="navbar li" whereas #navbar should be used the ID attribute
When I changed that, the CSS styling was applied to the html with the corresponding id attribute.
It seems you're doing things the right way, but your code sample misses some tags :
<html>
<head>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li class="navbar-link" class="active">Home</li>
<li class="navbar-link" class="active">About</li>
<li class="navbar-link" class="active">Portfolio</li>
<li class="navbar-link" class="active">Contact</li>
</ul>
</div>
</nav>
<style>
.navbar li {
margin: 5;
padding: 0;
width: 80;
float: left;
}
</style>
</body>
</html>
will do the trick. You have to say to the browser, what it have to do with those lines : use Html <html> and apply that style using <style> . If your style directives have to be more important, I think that it could be a better way to create a second file that will contains all your css and to link it with your html document.
EDIT :
The css rule : .navbar li will find the navbar class and find all its li childs, so you can remove ids on each li and replace them by a class name
I hope it may help
I use zurb foundation 6 and i'm pretty happy with it.
But i'm struggling with the header. My goal is to implement a main navigation like this:
How can i center the menu items inside a horizontal navigation with an image (logo) as a divider?
my attempt is to use an ul list for the nav items:
<nav class="row header show-for-large">
<div class="large-5 column">
<ul class="main-nav-left">
<li>Women</li>
<li>Men</li>
<li>Store</li>
<li>Blog</li>
</ul>
</div>
<div class="large-2 column ">
<%= image_tag("test-Logo.png", alt: "Nile Logo") %>
</div>
<div class="large-5 column">
<ul class="main-nav-right">
<li>EN & FR</li>
<li>Login</li>
<li>Wunschliste</li>
<li>Warenkorb</li>
</ul>
</div>
</nav>
I recently migrated the Centered Top Bar With Logo building block for Foundation 6. It should be exactly what you are after.
HTML
<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
<a class="logo-small show-for-small-only" href="#"><img src="http://placehold.it/50x50?text=LOGO" /></a>
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="http://placehold.it/350x150?text=LOGO">
</div>
</div>
<!-- Left Nav Section -->
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<!-- Right Nav Section -->
<div class="top-bar-right">
<ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
<li class="has-submenu">
Menu 4
<ul class="submenu menu vertical medium-horizontal" data-submenu>
<li>First link in dropdown</li>
</ul>
</li>
<li class="has-submenu">
Menu 5
<ul class="submenu menu vertical" data-submenu>
<li>First link in dropdown</li>
</ul>
</li>
</ul>
</div>
</nav>
SCSS
/* Variables */
// Adjust width accordingly (use even #'s)
$logo-width: 118px;
// Reduce px value to increase space between logo and menu text
$logo-padding: $logo-width - 32px;
// Leave alone
$logo-margin: - ($logo-width / 2);
/* Small Navigation */
.logo-small {
float: right;
}
.title-bar {
padding: 0 .5rem;
}
.menu-icon,
.title-bar-title {
position: relative;
top: 10px;
}
/* Medium-Up Navigation */
#media only screen and (min-width: 40rem) {
.logo-wrapper {
position: relative;
.logo {
width: $logo-width;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: $logo-margin;
}
}
// Right part
.top-bar-right {
width: 50%;
padding-left: $logo-padding;
ul {
float: left;
}
}
// Left part
.top-bar-left {
width: 50%;
padding-right: $logo-padding;
ul {
float: right;
}
}
}
I'm using Bootstrap to create a navbar in the top of the page, but i'm facing some problems:
After opening the navbar dropdown, I need to have a option list, and a image positioned to the right of the list. This image needs to have the same height of the list, just like in the following image (in portuguese, but easily understandable).
I achieved this setting a fixed height and width on the image, but the list can grow up and isn't a good option adjust it manually.
Another solution is to insert a div containing the list and the image, and set the image size to 100%, but when I do this, the dropdown isn't achieved anymore (I think i'm breaking the structure that Bootstrap uses to toggle the dropdown, am I right?).
How can I achieve this solution?
<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav top-elements">
<li id="dropdown-produtos" class="dropdown">
Nossos Produtos<span class="caret top-caret"></span>
<!-- div was here --> <ul class="dropdown-menu dropdown-menu-produtos">
<li class="dropdown-item-active">
texto1
<ul class="dropdown-menu img-dropdown">
<img src="assets/img.png">
</ul>
</li>
<li class="dropdown-item">
texto2
</li>
<li class="dropdown-item">texto3</li>
<li class="dropdown-item">texto4</li>
<li class="dropdown-item">texto5</li>
</ul>
</li>
</ul>
</div>
This should work:
<ul class="nav navbar-nav">
<li>Elemento 1</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DropDown<span class="caret"></span></a>
<ul class="dropdown-menu another-class">
<!-- ROW -->
<div class="col-md-12">
<!-- Column 1 -->
<div class="col-md-6">
<ul class="list-unstyled">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ul>
</div>
<!-- Column 2 -->
<div class="col-md-6">
<div class="drop-image">
<img src="./img/img.jpg" class="img-responsive" />
</div>
</div>
</div>
</ul>
</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Basically what I'm doing is create a div with a full width inside the dropdown element that comes as default in Boostrap. Inside this Full width row I create two columns with bootstrap col-md-6 class (you can do this with col-lg or col-sm or col-xs too) Inside this columns I add my content normally.
I created a class in the column 2 named "drop-image"; use this class to modify the img inside.
Hope it helps!
Btw, don't forget to style your dropdown (in the example I mark it with a class named another-class) so you define the position and width.
This might solve your problem, it's based off this plugin Yamm3!. See example Snippet.
Change this CSS rule if you need to make the dropdown wider because of the length of the link text. >
.list-unstyled, .list-unstyled ul {
min-width: 180px
}
body {
padding-top: 60px;
color: #666;
}
/* menu styes */
.list-unstyled,
.list-unstyled ul {
min-width: 180px
}
.list-unstyled > li {
padding-top: 10px;
}
.list-unstyled > li > a {
color: #555;
text-decoration: none;
}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
background: #f5f5f5;
}
.yamm .yamm-content {
padding: 0 30px 10px 30px;
}
.yamm .yamm-content .nav-title {
margin-left: 15px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
#media (max-width: 767px) {
.yamm-content .list-unstyled > li img {
margin-top: -180px;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Grande Menu
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos Dois<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="alert alert-warning">Olá</div>
</div>
I am using Bootstrap in my project and I have navigation bar in my home page. I want the scroll bar exactly shown in the below link.
http://www.little-neko.com/switcher/?theme=FatCatz
The scroll bar should not come where the navigation/top bar and it should start from the rest of content.
Please let me know, how to apply the css style to get partial scroll bar, which was shown in the above link. I hide the scroll bar by using the css style "body { overflow: hidden }", but not able to put the scroll bar in the child DOM node(div element).
It is an iframe, which is not recommended now a days.
<html>
<head>
<style>
.fixed{
z-index: 99999; //some very high value
position: fixed;
}
</style>
</head>
<body>
<div class="fixed">Fixed Content</div>
<iframe src="anyURL" frameborder="0" width="100%"></iframe>
</body>
</html>
Related question : Make fixed footer work with fixed header
Demo : http://jsfiddle.net/virendrachandak/cF2Fv/show/
I have solved my problem by using the below sample:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
http://jsfiddle.net/avrahamcool/QMsuD/
Half fixed, half scrollable layout that can be scrolled... CSS
Never use a i-frame for a website structure such as a header footer or anything for that matter. If you would like to accomplish a "sticky" header you need to use the proper bootstrap code for fixed to top.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
You can ready more about this at www.getbootstrap.com you can also look at the code here and see how they have accomplished this.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
You can see the working example here http://getbootstrap.com/examples/navbar-fixed-top/.