I am using the Simple Side Nav: http://startbootstrap.com/template-overviews/simple-sidebar/
I want to attach a button next to side of this Nav, on the Right Side which I will be using to hide and show the Nav Bar.
I have created a JSFiddle: https://jsfiddle.net/4q08khy1/
This button is the position i want it to be, as you can see in the image:
But it is hiding behind the Content Part of the page, is there a way to fix this?
my Left Nav:
<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>
<span> << </span>
</div>
and Style on toggle
<style>
.toggle {
background: #1ABC9C;
color: #eee;
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
right: -50px;
top: 18px;
box-shadow: 5px 0 0 rgba(0,0,0,0.1);
z-index: 5000;
}
</style>
Try adding following CSS to your code:
a#menu-toggle {
margin: -25px 0 0 -36px;
}
Related
I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)
So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.
I've been asked to have inline sub-menu items for a site I'm making using Bootstrap.
The default with Bootstrap for drop-down is a nice 'downdown-toggle' class where items are stacked and only width of items with some padding.
How can I adapt that class for the sub-menu background to be 100% screen width, then sub-menu items in container and items (li's) to be inline not stacked? See mock-up image of what I want to achieve.
Note that unlike the current sub-menu, this would need to push all content below down rather than hover over it.
EDIT after mk14 gave really good code below. This is what I get (see image below). I just need items to be in a container (i've shown in yellow) and to push the content of the page down and back up as menu shows and hides. To reiterate, I want the grey background to be 100% width of screen as I said, but items in the container.
Okay, I'm expanding on the first answer based on the comments you made under it and adding more specificity and the media query.
http://jsbin.com/rusup/1/edit
DEMO: http://jsbin.com/rusup/1/
CSS (add your breakpoint when the larger viewport menu kicks in )
#media (min-width:768px) {
body { padding-top: 60px } /* height of the menu collapsed */
.nav-bg {
height: 0px;
width: 100%;
position: absolute;
top: 50px;
background: #e7e7e7;
transition: all .5s ease-in-out;
}
.menu-open .nav-bg { height: 50px } /* change to your height of the child menu */
.menu-open #page {
padding-top:60px;
transition: all .2s ease-in-out;
}
.navbar-nav.nav > li { position: static }
.navbar-nav.nav .dropdown-menu {
left: 0 !important;
right: 0 !important;
box-shadow: none;
border: none;
margin: 0 auto;
max-width: 1170px;
background: transparent;
padding: 0;
}
.navbar-nav.nav .dropdown-menu > li { float: left }
.navbar-nav.nav .dropdown-menu > li > a {
width: auto !important;
background: transparent;
line-height: 49px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
}
jQuery:
$('.navbar').append('<span class="nav-bg"></span>');
$('.dropdown-toggle').click(function() {
if (!$(this).parent().hasClass('open')) {
$('html').addClass('menu-open');
} else {
$('html').removeClass('menu-open');
}
});
$(document).on('click touchstart', function (a) {
if ($(a.target).parents().index($('.navbar-nav')) == -1) {
$('html').removeClass('menu-open');
}
});
HTML
<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>Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Link</li>
</ul>
<li class="dropdown">
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Dropdown 2 Child 1</li>
<li>Dropdown 2 Child 2</li>
<li>Dropdown 2 Child 3</li>
<li>Dropdown 2 Child 4</li>
</ul>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" id="page">
Me finks this is a page.
</div>
This post covers this topic as a general solution.
Here is an adaptation for bootstrap:
.nav > li{
position: static !important;
}
.dropdown-menu {
left: 0 !important;
right: 0 !important;
}
.dropdown-menu > li{
float: left !important;
}
.dropdown-menu > li > a{
width:auto !important;
}
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I am using SpriteMe for my webpage and have code below. The problem is it show full sprite image instead of single image inside it.
<div class="white_box">
<div class="white_box_top_JS" style="background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); border: 2px solid red; background-position: -279.5px -10px; ">
<h2>Job Seekers</h2>
<ul>
<li>
Register
</li>
</ul>
</div>
</div>
I have read and followed <ul> Sprite Issue but can't get it.
http://jsfiddle.net/6TaQt/30/
It is best to stay away from inline style whenever possible. Additionally, the li element should receive the sprite, not the anchor. Here is a start on the relevant changes:
(also in a forked fiddle )
HTML:
<ul>
<li id="register">
Register
</li>
<li id="post">
Post resumes
</li>
<li id="find">
<a href="/find-jobs/" class="seo" >Find jobs</a>
</li>
<li id="get">
Get jobs by email
</li>
</ul>
CSS:
#register { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -1315px -6px; }
#post { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png) ;
background-position: -1360px -6px; }
#find { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -685px -5px; }
#get { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -544px -6px; }
i can't seem to figure out why this works:
#inside-footer {
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 85%;
}
#inside-footer ul.footer_nav {
text-align: left;
float: left;
margin: 20px 10px;
position: relative;
width: 164px;
}
<div id="inside-footer">
<ul class="footer_nav">
<h4>Zeigeist</h4>
<li>
About
</li>
<li>
Blog
</li>
<li>
Contact & Support
</li>
<li>
Training
</li>
<li>
Site Status
</li>
</ul>
<ul class="footer_nav">
<h4>Tools</h4>
<li>
Chapter Generator
</li>
<li>
Activies Board
</li>
</ul>
<ul class="footer_nav">
<h4>Documentation</h4>
<li>
Chapter Sites
</li>
<li>
Developers
</li>
</ul>
<ul class="footer_nav">
<h4>External Links</h4>
<li>
News
</li>
<li>
Media
</li>
</ul> <!-- /upper-footer-->
</div><!-- /inside-footer -->
but on my site http://zmgc.net/ the list items are across, and not under the header tags.
i would like to display it like http://jsfiddle.net/ypr8g/13/ but equally distributed within the yui3-u-19-24 div and i perhaps i can split this with another yui3-g and put each within a yui3-u-1-4 div but does not seem right!
what am i missing?
thanks
Where you have #inside-footer li {
float: left;
margin-top: 5px;
padding: 0;
} it needs the float taken out as this displays the li's side by side, change it to #inside-footer li {
margin-top: 5px;
padding: 0;
} and it will display as you want it i.e. below the header tags.