I have very simple list of links in bootstrap navbar:
<div class="navbar">
<ul class="nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
but that list is aligned on the left, I need it centered, I tried add inline style
style="text-align:center"
but it doesn't help.
Example:
http://jsfiddle.net/NdsaU/
How can I center it?
Html
<div class="navbar">
<div class="container">
<ul class="nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
</div>
Css
.navbar { text-align:center; }
.navbar .nav { display:inline-block; float:none; }
Fiddle
Related
I'm trying to apply styles for Menu class. However, when I'm writing some CSS properties to the menu the styles are not applying. How to select the exact CSS class div inside another div that to div inside header like this code below
<section class="showcase">
<header>
<img src="assets/images/logov2.png" alt="company-Logo" style="width:160px;height:20px;">
<div class="menu">
<ul>
<li>How it works</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
<div class="Access">
Get Early Access
</div>
</header>
</section>
Just use the tag header as the start point to reach other selectors.
header>img {
height: 220px;
width: 300px;
}
header>.menu {
background-color: red;
}
header>.Access {
padding: 10px;
background-color: yellow;
}
<section class="showcase">
<header>
<img src="https://images.unsplash.com/photo-1554232456-8727aae0cfa4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="company-Logo">
<div class="menu">
<ul>
<li>How it works</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
<div class="Access">
Get Early Access
</div>
</header>
</section>
This is what I have so far: (using bootstrap)
<body>
<div class="container">
<div class="page-header">
<h1>Title <small>Secondary Text</small></h1>
<ul class="nav nav-pills navbar-right">
<li class="active">Home</li>
<li>Register</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
The page-header creates a horizontal line and I want the navigation menu above that line, aligned on the right and the title on the left. For some reason it keeps going below the horizontal line.
I tried using div container-fluid, but the title jumps up and isn't resting on the horizontal line at that point.
All help is appreciated. Thank you.
You can use display: flex; on your .page-header to position the elements next to each other.
With flex: 1; on h1 and .nav both get the same amount of space from the viewport width (50%). Of course you can adjust this value for your needs. On small viewport widths you will have to adjust the styles, e.g. with media queries.
.page-header {
display: flex;
}
h1,
.nav {
flex: 1;
vertical-align: top;
margin-top: 0 !important;
}
.nav {
text-align: right;
}
.nav.nav-pills>li {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header">
<h1>Title <small>Secondary Text</small></h1>
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Register</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</div>
</div>
It's a small problem with you tag wrapping. You have wrapped all elements under the page-header.This is your first mistake. The starting div must be page-header and then followed by container in which h1 and ul elements are present.
Second mistake is when you tried to pull ul the elements to the left.There are no elements that are pull to right. Because of this the browser thinks it as a new line instead of the same one.Therefore, you need to wrap the h1 with a div with class pull-left.
This would work according to your wish.
<body>
<div class="page-header">
<div class="container">
<div class="pull-left">
<h1>Title <small>Secondary Text</small></h1>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Register</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
<header>
<div>
<h1>Midorikawa's Site</h1>
<hr />
<!--<p>Work in progress</p>-->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper"></div><!-- THIS div has to go underneath the other div -->
</header>
the "wallpaper" div has to go underneath the other div the "wallpaper" div is javascript activated and switches wallpaper with an fade but i have no idea how to get it underneath the other div please help
Use position: absolute on the first div:
Refer code:
<header>
<div class="content">
<h1>Midorikawa's Site</h1>
<hr />
<!--<p>Work in progress</p>-->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper"></div><!-- THIS div has to go underneath the other div -->
</header>
CSS
.content {
position: absolute;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.body {
position: relative;
}
Use position: absolute; on both children of <header>.
Use positive z-index on the div you want on top.
jsFiddle: https://jsfiddle.net/sukritchhabra/89f1est4/
Use css property z-index on your divs. The one which you need on top should have higher z-index than the one that should be underneath it (I coloured the divs for visual).
<div style="position:absolute">
<h1>Midorikawa's Site</h1>
<hr />
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper" style="width:50px;height:100px;background-color:red;z- index:-5"></div>
I have the following html code for a simple menu:
<div class="wHeader">
<div class="header">
<img src="header.png">
</div><!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item">Home</li>
<li>
Language
<ul class="sub-menu">
<li><a href=#>Lang1</a></li>
<li><a href=#>Lang2</a></li>
<li>Other ...</li>
</ul>
</li>
</ul>
</nav>
</div> <!-- menu-wrap ends here-->
The CSS style for <ul> is as follows:
.sub-menu {
width:120%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#808080;
}
I'm trying to put a flag image in one of the list items like this:
<li style="list-style-image: url('smallflag.png');">Lang1</li>
But so far the image is not appearing. Is there any conflict with background? Any suggestions to solve this?
.sub-menu {
width:120%;
padding:5px 0px;
position:absolute;
/*top:100%;*/
<!--left:0px;-->
z-index:-1;
/*opacity:0;*/
transition:opacity linear 0.15s;
background:#808080;
}
<div class="wHeader">
<div class="header">
<!--<img src="header.png">-->
</div><!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item">Home</li>
<li>
Language
<ul class="sub-menu">
<li><a href=#>Lang1</a></li>
<li><a href=#>Lang2</a></li>
<li style="list-style-image: url('http://placehold.it/20x20');">Other ...</li>
</ul>
</li>
</ul>
</nav>
</div>
The sub-menu class is hiding it and moving it to the bottom of the screen, also the picture is lost with the left:0px property.
If you comment out the top:100%, left:0 and opacity properties, the item will show with its image
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;
}
}
}