I have a menu and I want to have a vertical divider between Item 2 and Item 3. But Im not having success doing this because the divider is not occupying the full height of the menu and the menu items are not staying vertical aligned with the divider.
Also if you know how to have the logo aligned vertically with the menu items it would be nice because it is also not staying, the menu it's a bit more above the logo.
Menu html:
<header class="header container">
<div class="content">
<h1 class="main_logo fl-left">LOGO</h1>
<ul class="nav fl-right">
<li>Item 1</li>
<li>Item 2</li>
<li class="separator"></li>
<li>Item 3</li>
<li><a class="btn" href="">Item 4</a></li>
</ul>
<div class="clear"></div>
</div>
</header>
<div class="container">
<section class="section">Test</section>
</div>
The working example is here: https://jsfiddle.net/5rjdofu7/
You need a line-height to align the stuffs. So, adding the following CSS will make the logo and <ul> align middle vertically. Also, you have too much padding, which if you don't need, you have to get rid of.
h1, ul {
line-height: 100px;
}
Preview
If this is what you are expecting:
Related
I tried to several ways to make the code below work. Now there is only one issue left and that the top-bar-title (Site Title) is having a white background when the user scrolls vertical up to the top when it should stay grey the color of the topbar. Does anybody know what is wrong?
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%">
<div class="top-bar-title menu-text">Site Title</div>
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>Item 1</li>
<li>Item 1</li>
/ul>
</div>
</div>
</div>
Style your widemenu div in order to keep it from being overwritten by scrolling upward. Here is your menu div with the height added. You could also add that style in your css file.
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%;height:50px;">
Good luck!
I am using wt-rotator carousel plugin with bootstrap. I have to place a menu on top of the carousel on the top left, in a fixed position. The menu should stay there even as the images fade in and fade out. Is there a way to do it using CSS?
Edit: added the code below.
So far just this code below. it is a bootstrap jumbotron, which has a wt-rotator carousel inside. On top of this carousel, I have to put a menu.
<div class="jumbotron">
<div class="container">
<div id="banner-container">
<div class="wt-rotator">
<div class="c-panel">
<div class="thumbnails">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="buttons">
<div class="prev-btn"></div>
<div class="play-btn"></div>
<div class="next-btn"></div>
</div>
</div>
</div>
</div>
</div>
You can use a outside div with position absolute and z-index superior to the slider, and put that div on front of the slider.
I am working on a web page that uses Bootstrap. I am trying to add a fixed navbar. This navbar will have three sections. I want the left content to be left-aligned, the center content to be center-aligned and the right content to be aligned to the right. Basically, I need it to looks like this:
+-----------------------+-----------------------+-----------------------+
| Hello | item 1 | item 2 | contact |
+-----------------------+-----------------------+-----------------------+
In an attempt to do this, I've written the following code:
<nav class="navbar navbar-static-top" style="background-color:#000;">
<div class="navbar-brand pull-left">Hello</div>
<ul style="list-inline">
<li>item 1</li>
<li>|</li>
<li>item 2</li>
</ul>
<div class="pull-right">
contact
</div>
</nav>
The "Hello" is properly aligned. The "contact" is properly aligned. However, I can't seem to figure out how to center the ul within the navbar. Can somebody please share their CSS mojo?
Thanks!
You can do it using col- and text-align like this:
* {
color: #fff;
}
.list-inline {
display: inline-block;
}
.left-content{
text-align: left;
}
.center-content{
text-align: center;
padding: 15px;
}
.right-content{
text-align: right;
padding: 15px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-static-top" style="background-color:#000;">
<div class="navbar-brand left-content col-xs-2">Hello</div>
<div class="center-content col-xs-8">
<ul class="list-inline">
<li>item 1</li>
<li>|</li>
<li>item 2</li>
</ul>
</div>
<div class="right-content col-xs-2">contact</div>
</nav>
You can change the cols according to what you need, check out this fore more info http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>
I'm using bootstrap and I need to implement a list of items to be displayed over many columns.
Bootstrap uses a grid that is 12 cells wide.
My item being 3 cells wide (that's how I roll), it means that a row holds only 4 items.
item 1 | item 2 | item 3 | item 4
item 5
My item is not a simple text but a "card" :
The code can be found there.
The straightforward way to write this would be:
<div class="row">
<div class="col-md-3">[item 1]</div>
<div class="col-md-3">[item 2]</div>
<div class="col-md-3">[item 3]</div>
<div class="col-md-3">[item 4]</div>
</div>
<div class="row">
<div class="col-md-3">[item 5]</div>
</div>
But it feels non semantic.
The fact that my items are displayed on many rows is truly pertaining to presentation choices.
Besides, if I now decide that my items should be wider, I have to change the structure of my document (as opposed to class attributes).
Besides that way of doing things is even more artificial on a mobile screen were all my items are displayed on top of each other.
Is there another way to write my list? A more 'semantic' way ?
From my stand, the best way to display an Unordered LIST with hypertext markup is :
<ul>
<li>
So, you can try a list of ul>li setting your <li> width to 25%, float-left.
Your 5th element is supposed to stack bottom left.
If you still want to use bootstrap grid system, just put your 'items' inside the same row.
<div class="row">
<div class="col-md-3">item 1</div>
<div class="col-md-3">item 2</div>
<div class="col-md-3">item 3</div>
<div class="col-md-3">item 4</div>
<div class="col-md-3">item 5</div>
<div class="col-md-3">item 6</div>
<div class="col-md-3">item 7</div>
</div>
The overflowed elements will be stack bottom left.
So give it a try:
<ul class="row">
<li class="col-md-3">item 1</li>
You could use a UL list..
<ul class="list-unstyled">
<li class="col-md-3">item 1</li>
<li class="col-md-3">item 2</li>
<li class="col-md-3">item 3</li>
<li class="col-md-3">item 4</li>
<li class="col-md-3">item 5</li>
<li class="col-md-3">item 6</li>
<li class="col-md-3">item 7</li>
</ul>
Demo: http://bootply.com/91825
However, you'd need to change this markup if you decide to make things wider.
1.You can always change the default 12 space grid to whatever you prefer by setting #gridColumns to your preference in this page or overriding the css.less if you prefer.
2.With Bootstrap you can use the custom class inline to build your list:
<ul class="inline">
<li>...</li>
</ul>
3.But as Milche refered col-md-3 will do the trick if you stick to one row. I think I would use a tag though, to make clear it's inline.