I'm using bootstrap and want to add a header bar to the right of the sidebar, so it aligns next to it, without sitting on top. The sidebar is also collapsible, so the header would have to extend to the whole page once the sidebar is collapsed.
Sidebar code:
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
Did it with the default navbar by positioning it within the wrapper, but below the side-bar nav div, no extra positioning needed.
Seeing as you're already using bootstrap, why don't you add the already built column classes to your markup. Be sure you have Bootstrap CSS included.
<div id="sidebar-wrapper" class="col-lg-3">
Then on your Header...
<div id="header-wrapper" class="col-lg-9">
Also just did a pen found here
It would be a good idea to take advantage of the column classes as it make responsive design easier.
Related
I have horizontal & vertical menu in header section and vertical menu need to show the submenu as dropdown on click event, Horizontal menu also has submenus which are not shown in this example as i am stuck with the vertical menu More Menu as
Codepen: https://codepen.io/KGuide/pen/jOEpzQo
in below code Media submenu items should show under Media rather it shows them at the bottom, how can i fix this as per image shown
<div class="menu-w">
Menu One
Menu Two
Menu Three
Menu Four
</div>
<div class="menu-w">
More Menu
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Media
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
News
</li>
<li>
Video Gallery
</li>
<li>
Blog
</li>
</ul>
</li>
<li>Directory </li>
<li>Contact </li>
</ul>
</div>
just remove .list-unstyled from the #pageSubmenu ul
So basically I have a unordered list and I used css to display the list in a row using (display:inline). And im having the problem where I try to position one of the list elements to the opposite side of the page. It will act as one whole unit basically. How do I move these separately from each other? Thanks ahead of time! #save-my-code
<ul class="nav nav-pills">
<li>
Portfolio
</li>
<li>
Youtube
</li>
<li>
Blog
</li>
<li>
Photography
</li>
</ul>
Use the class pull-right to pull your elements to the right side of the page.
<ul class="nav nav-pills">
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
Youtube
</li>
<li>
Blog
</li>
<li>
Photography
</li>
</ul>
Alternatively, use
.pull-right {
float: right
}
if you're not using bootstrap.
Hope this helps!
I have a navigation menu, with a collapsible list of child pages. Except the dropdown element needs to have an accessible page on the same line as well. This is what I have so far.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-lg-2">
<div class="navbar navbar-default navbar-fixed-side">
<ul class="nav" id="side-menu-0">
<li id="menu-template" class="nav">
<i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li id="menu-template-top" class="nav" role="menu">
Google
<span class="caret"></span>
<ul id="menu-template-top-sub" class="collapse nav nav-second-level">
<li class="nav">
Flot Charts
</li>
<li class="nav">
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
</div>
Here is the working fiddle, so you can see what I am trying to do. I want the Link for "Google" to stretch across to the right, like the "Dashboard" link can do. Working Fiddle
A simple fix for this is to do this:
Google
You could of course externalize this to a stylesheet if you wish.
The 40px in the calc(100% - 40px) is the width of your dropdown caret.
This makes it stretch all the way to the dropdown-expansion button.
Add display block to your <a> tag, instead of display inline-block. Block elements will span the entire width.
I am using Twitter Bootstrap 3.2.0 and the nifty scrollspy feature in it. It works fine for me. I just have a long menu on the right side, and it is set to be affixed, and it corresponds to a huge amount of text. This functions without an issue with the following code;
Questions
Without data-offset-top="60", it doesn't 'stay put' right. I don't understand why this is.
I would like to make it 'trigger' sooner. Right now, a <div> with the corresponding id has to be almost all the way to the top of the page for the matching menu item to get 'highlighted'. Is it possible to make this a bit quicker, maybe where it will trigger when it is around 200px from the top?
HTML
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<!-- all of my page contents here, with appropriate "id" set on each to correspond -->
</div>
<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" data-offset-top="60" data-spy="affix" data-theme-role="sidebar" id="sidebar-menu">
<ul class="nav sidenav">
<li class="active">
alpha
<ul class="nav">
<li>
alpha[1]
</li>
</ul>
</li>
<li>
beta
</li>
<li>
gamma
<ul class="nav">
<li>
gamma[1]
</li>
<li>
gamma[2]
</li>
<li>
gamma[3]
</li>
</ul>
</li>
<li>
delta
<ul class="nav">
<li>
delta[1]
</li>
<li>
delta[2]
</li>
</ul>
</li>
<li>
epsilon
<ul class="nav">
<li>
epsilon[1]
</li>
<li>
epsilon[2]
</li>
</ul>
</li>
<li>
zeta
<ul class="nav">
<li>
zeta[1]
</li>
<li>
zeta[2]
</li>
</ul>
</li>
<li>
eta
<ul class="nav">
<li>
eta[1]
</li>
<li>
eta[2]
</li>
</ul>
</li>
<li>
theta
<ul class="nav">
<li>
theta[1]
</li>
<li>
theta[2]
</li>
</ul>
</li>
</ul>
</div>
</div>
I had similar issues,
1- The data-offset-top kind of tells the affix plugin when to get started....so how far down the user scrolls until it needs to affix the div you have set up.
something that might work better than just a hard coded number, 60, is to set up the affix in javascript, rather than the attributes of the HTML element. and when you set the offset, you can get the exact starting position of the element, and then have the affix only kick in after that location has been scrolled past.
$('#sidebar-menu').affix({ //this sets up the affix plugin
offset: $('#sidebar-menu').position().top //this gets the exact
//location of the div and only starts to affix after that
});
when you use the javascript method, you should take out the
data-offset-top="60" data-spy="affix"
2- The data offset should work, again, maybe try the javascript version
$(document).ready(function() {
$('body').scrollspy({
target: '#sidesummary',
offset: 100
});
});
I use the framework Foundation 5, i use the top bar and i want to insert into the top-bar a simple progress bar
The only problem is the progross bar is not horizontal but vertically. It's really strange, i don't know how to correct that.
jsfiddle
<nav class="top-bar" data-topbar="">
<!-- Title -->
<ul class="title-area">
<li class="name"><h1>Sexy Top Bar</h1></li>
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Top Bar Section -->
<section class="top-bar-section">
<!-- Top Bar Right Nav Elements -->
<ul class="right">
<!-- progess bar bug -->
<li>
<div class="progress">
<span class="meter"></span>
</div>
</li>
<li class="divider"></li>
<!-- Anchor -->
<li>Generic Button</li>
<li class="divider"></li>
<!-- Button -->
<li class="has-form show-for-large-up">
Get Lucky
</li>
</ul>
</section></nav>
It's not vertical, it's just doesn't have width.
fix:
div.progress{
width: 500px;
}