Is there a way to create a vertical menu (not dropdown, entirely separate vertical menu on sidebar) by using any bootstrap class? I can create one using my css, but just want to know if there is any builtin class for this in bootstrap, or can it be done using the top-bar with any hack?
The question is old now.
But if somebody looks here the trick in the current version is to use the nav-stack class, like so:
<nav>
<ul class="nav nav-pills nav-stacked span2">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
The "nav nav-list" class of Twiter Bootstrap 2.0 is handy for building a side bar.
You can see a lot of documentation at
http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php
With Bootstrap 2.0 you can give your tabs the "stackable" class, which makes them stack vertically.
here is vertical menu base on Bootstrap
http://www.okvee.net/articles/okvee-bootstrap-sidebar-menu
it is also support responsive design.
With a few CSS overrides, I find the accordion / collapse plugin works well as a sidebar vertical menu. Here's a small sample of some overrides I use for a menu on a white background. The accordion is placed within a section container:
.accordion-group
{
margin-bottom: 1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-bottom: 1px solid #E5E5E5;
border-top: none;
border-left: none;
border-right: none;
}
.accordion-heading:hover
{
background-color: #FFFAD9;
}
You can use Bootstrap's tabs with bootstrap-verticaltabs. This modifies Bootstrap's Tabs to provide an alternative vertical styling. That way you can use the built in tabs in bootstrap and get the vertical menu you are looking for.
Bootstrap Vertical Tabs
https://github.com/entropillc/bootstrap-verticaltabs
Responsive utility classes
Easiest way I can think of is to have a vertical left menu AND the collapsing Top Nav in your design and attach/use bootstraps responsive css.
Then just add classes of hidden phone, tablet etc (to suit) to your left nav and hidden desktop etc to the top nav
see: http://twitter.github.com/bootstrap/scaffolding.html#responsive
play around with that and hopefully it should be able to do what you want
This doesn't quite yet look like what I want, but I accomplished something like
this by stacking nav pills in the leftmost two spans. This is what my app's
app/views/layouts/application.html.erb file looks like:
<!DOCTYPE html>
...
<body>
<!-- top navigation bar -->
<div class="navbar navbar-fixed-top">
...
</div>
<div class="container-fluid">
<!-- the navigation buttons bar on the left -->
<div class="sidebar-nav span2"> <!-- we reserve 2 spans out of 12 for this -->
<ul class="nav nav-pills nav-stacked">
<li class="<%= current_page?(root_path) ? 'active' : 'inactive' %>">
<%= link_to "Home", root_path %>
</li>
<li class="<%= current_page?(section_a_path) ? 'active' : 'inactive' %>">
<%= link_to "Section A", section_a_path %>
</li>
<li class="<%= current_page?(section_b_path) ? 'active' : 'inactive' %>">
<%= link_to "Section B", section_b_path %>
</li>
</ul>
</div>
<div class="container-fluid span10"> <!-- use the remaining 10 spans -->
<%= flash_messages %>
<%= yield :layout %> <!-- the content page sees a full 12 spans -->
</div>
</div> <!-- class="container-fluid" -->
...
</body>
</html>
Now the stacked pills appear on the top left, below the navbar. When the user clicks on
one of them, the corresponding page loads. From the point of view of
application.html.erb, that page has the 10 rightmost spans available for it,
but from the page's view, it has the full 12 spans available.
The button corresponding to the page currently being displayed is rendered as
active, and the others as inactive. Specify the colours for active and inactive
buttons in file app/assets/stylesheets/custom.css.scss (in this case, the
colour for a disabled state is also defined):
#import "bootstrap";
...
$spray: #81c9e2;
$grey_light: #dddddd;
...
.nav-pills {
.inactive > a, .inactive > a:hover {
background-color: $spray;
}
.disabled > a, .disabled > a:hover {
background-color: $grey_light;
}
}
The active pill's colour is not defined, so it appears as the default blue.
File custom.css.scss is included because of the line *= require_tree . in
file app/assets/stylesheets/application.css.
No, not in the current one. But you can take a look at the next version by downloading it from github. It has vertical pills and tabs. Maybe that will help? (be aware, it's under construction tho)
You can use the sidebar class to render list items vertically. Not exactly a menu, but close:
http://twitter.github.com/bootstrap/examples/fluid.html
You can use menu left sidebar collapse accordion, animated with right arrow
Demo:
http://www.jqueryscript.net/demo/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi/
Download:
http://www.jqueryscript.net/menu/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi.html
Try the following (no custom.css required):
<div class="col-md-2">
<nav>
<ul class="nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
</div>
Related
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
I am in the middle of creating a website using Dreamweaver CC 2014. The Homepage scrolls fine, but the About page and Calendar page doesn't scroll at all and cuts off the bottom half that should be displaying. I've read the other threads that say to add the overflow: scroll code to the CSS. I have done that, but it still isn't working and I'm wondering if I have placed the code in the wrong place?
Here is the link to the Calendar page:
http://normajdougherty.com/Calendar.html
Would you look at the CSS and HTML code and let me know what the problem is? Thanks so much.
You have
position:fixed;
Specified in your navigation bar, which is effectively "locking" the page in place. If you set its position to relative, your menu items (which should also not be set to "fixed") are no longer going to be attached to the navbar.
But the way you have implemented the navbar in the first place is kind of kludgy. You don't need a separate div for the blue bar in the background.
Instead of having two overlapping fixed divs, which is a bad practice for several reasons, just place your navigation buttons in a single div with a background color, using the "background-color" property.
Also, the reason it looks "cut off" halfway down is because that's just the size of the image you're using in the background. Consider setting up a color gradient or something, or honestly just leave the background a solid color. Unless you do something particularly fancy, a big static image like that is not going to look the way you want it to.
EDIT: Okay, at second glance, it looks like your entire page is wrapped within the navigation bar div. That's why the whole page is locked in place when "position:fixed" is set. Make sure you close the tag for the navbar before the rest of the page content starts.
But still, you shouldn't have a fixed navbar like that in the middle of the page, as it will scroll down with the rest of your content and just end up looking really bad.
It is because you set
positon:fixed;
in navbar class.
remove it and page will work fine
So remove
position:fixed
from .navbar class in calendar.css
You're facing this problem because the content part of your page is wrapped inside the navbar div which has been assigned a fixed position. You will need to add the intro div and the <iframe> after the navbar div for your website to function properly.
This is how that particular part of code currently looks like on your website (notice <div class="intro"> and the <iframe> is inside <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br>
<center>
<iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</center>
</div>
And this is how you should modify it (both <div class="intro"> and the <iframe> are added after <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br/>
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>
Add this two styles in at header section of Calendar.html (this code is writing as internal css, because this code don't affect other pages)
#menu {position: absolute; }
.navbar {position: static;}
I am trying to define two menu's in my header using the bootmetro framework. The first is my main menu and the second is my user menu.
For some reason the menu is visualized wrong the second time, the line space of the menu items are too large.
The code used to create a menu looks something like this
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
Actions
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li class="divider"></li>
<li>item4</li>
</ul>
</div>
The problem I run in to is shown in the screenshots below. In my second menu the menu item does not take the full with of the menu.
UPDATE:
The problem seems to be in the bootmetro CSS stylesheet and firebug narrows the search a bit (thanks Thanh Trung!). In inspect mode I can clearly see that the a href does not fill the menu item (li) in my second menu, while it does take the max width in my first menu.
The part in the bootmetro CSS looks like this:
.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
Additional question: What does this '>' cause? I have never seen that before.
In both menus the CSS class "dropdown-menu" is used, BUT, when I remove the body of this CSS class only the first menu changes accordingly.
Main question: So why is this class not properly inherited by me second menu item?
For completeness again the HTML code for the second menu (the menu that shows the artifact):
<div class="dropdown pull-left">
<a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
<b class="icon-settings"></b>
</a>
<ul class="dropdown-menu pull-right">
<li>Settings</li>
<li>Settings</li>
<li>Settings</li>
<li class="divider"></li>
<li>Log out</li>
</ul>
</div>
Correctly visualized menu
Wrongly visualized menu
Inspection: the "a" is not taking the full width
Inspection: the list item is taking the full width
Because the code is identical, but there are difference when displaying, it means that the css is affecting it. Without given us the css, it's impossible to tell what is the problem.
Here are css properties that could affect the total height of an element: height, line-height, padding, margin.
You can use Firebug or Chrome inspector to inspect an element to see its styles
UPDATE
bootmetro.css line 2018 is affecting (overriding) it
#top-info a {
display: inline-block;
height: 46px; /**** should be removed or override *****/
color: #5A5A5A;
}
Also I suggest you to use Firebug (an addon of firefox) to inspect elements, dont use the inspector of Firefox
I feel like a moron having to ask this, but I have always evaded CSS at all costs, and as I now find myself needing it again, I have been scavenging Google for an example with no luck.
Basically I have icons specific to each category, and would like to create a horizontal nav bar in CSS/HTML using these, but also displaying a text link under them as well. I have found snippets for doing one or the other, but every time I try and combine the two together, the entire page seems to breakdown.
Can anyone provide an example of how this can be done? If it helps, it would basically look like...
[-IMAGE-] [-IMAGE-] [-IMAGE-]
[-TEXT-] [-TEXT-] [-TEXT-]
The effect can be easily get through background-position in CSS with proper padding-top applied to the li elements:
background-position: top;
padding-top: 50px; /* Height of image */
Here is an example fiddle.
Update:
Here is the more descriptive fiddle with different images on different li elements.
http://jsfiddle.net/LajUZ/2/
HTML:
<ul class="nav">
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
</ul>
CSS:
.navitem
{
float: left;
}
I'm trying to align the share, like and tweet button horizontally but I can't get the share button right. I tried adding vertical align top, changing the height and display:inline but it always remains more or less 10px belowe the others. What should I do to get them all aligned?
<div style='vertical-align: top;'>
<a expr:share_url='data:post.url' name='fb_share'/>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-related=':' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:20px;'/>
</div>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
Thanks
An easier method than styling these elements individually, is to sandwich them inside <li> tags--allowing you to position the parent <ul> easily, and also float the <li> tags (creating the 'inline' effect you're after.)
jsFiddle didn't like the facebook APIs, so I used 3 twitter buttons instead; the code looks like:
<ul class="social_network">
<li>
Tweet
</li>
<li>
Tweet
</li>
<li>
Tweet
</li>
</ul>
With some very simple CSS (including a subtle outline so you can see the boundaries of the <li> elements:
.social_network {
position : relative;
list-style-type : none;
}
.social_network li {
float : left;
border : 1px solid rgba(0,0,0,.1);
padding : 6px;
margin : 2px;
}
You can find an example of the above here: http://jsfiddle.net/kgFaW/
This should put you in the right direction. Let me know if you run into any issues with the Facebook APIs.
to do display:inline you can wrap each control into list like this:
<ul><li>
<a class=....../>
</li> <li> <a expr....../> </li></ul>
Also, add: list-style-type:none;
To make your controls stick to the right side of the screen,
do:
position:absolute;
right:0;