I have a navbar. When I hover it, a dropdown menu will appear. But when I put a style for fixed header on my navbar, the dropdown does not display the menu until the bottom. It looks like it's cut off.
.sticky {
position: fixed;
top: 0;
width: 100%;
left: 0;
background-color: white;
z-index: 999;
}
<div class="nav-item">
<div class="container">
<nav class="nav-menu mobile-menu ">
<ul>
<li class="active">Home</li>
<li>
Item1
<ul class="dropdown">
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">List Item </a>
</li>
<li>
<a class="font-weight-bold">This is not Last Item </a>
</li>
<li>
<a class="font-weight-bold">This is Last List Item </a>
</li>
</ul>
</li>
<li>Item2
<ul class="dropdown"></ul>
</li>
</ul>
</nav>
</div>
and this is my screenshot for my navbar :
Screenshot
Thank you
You need to add this style to your .dropdown:
height: 100%;
overflow-y: scroll;
Related
Hello I am having a problem that when I make my top area non scroll able the area almost completely disappears.
Before Fixed Picture
html for header
<section id="header">
<div class="container">
<ul class="top-nav">
<li>
<a href="#" class="choose-language" data-toggle="popover" id="languageChooser" data-original-title="" title="">
English
<b class="caret"></b>
</a>
<div id="languageChooserContent" class="hidden">
<ul>
<li>
العربية
</li>
<li>
Azerbaijani
</li>
<li>
Català
</li>
<li>
中文
</li>
<li>
Hrvatski
</li>
<li>
Čeština
</li>
<li>
Dansk
</li>
<li>
Nederlands
</li>
<li>
English
</li>
<li>
Estonian
</li>
<li>
Persian
</li>
<li>
Français
</li>
<li>
Deutsch
</li>
<li>
עברית
</li>
<li>
Magyar
</li>
<li>
Italiano
</li>
<li>
Macedonian
</li>
<li>
Norwegian
</li>
<li>
Português
</li>
<li>
Português
</li>
<li>
Română
</li>
<li>
Русский
</li>
<li>
Español
</li>
<li>
Svenska
</li>
<li>
Türkçe
</li>
<li>
Українська
</li>
</ul>
</div>
</li>
<li>
Login
</li>
<li>
Register
</li>
<li class="primary-action">
<a href="/cart.php?a=view" class="btn">
View Cart
</a>
</li>
</ul>
<img src="/assets/img/logo.png" alt="WebKing Web Services">
</div>
</section>
html for navbar
Toggle navigation
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav">
<li menuitemname="Home" class="" id="Primary_Navbar-Home">
<a href="/index.php">
Home
</a>
</li>
<li menuitemname="Store" class="dropdown" id="Primary_Navbar-Store">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Store
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Browse Products Services" id="Primary_Navbar-Store-Browse_Products_Services">
<a href="/cart.php">
Browse All
</a>
</li>
<li menuitemname="Shop Divider 1" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_1">
<a href="">
-----
</a>
</li>
<li menuitemname="Select Your Perfect Plan" id="Primary_Navbar-Store-Select_Your_Perfect_Plan">
<a href="/cart.php?gid=1">
Select Your Perfect Plan
</a>
</li>
<li menuitemname="symantec" id="Primary_Navbar-Store-symantec">
<a href="/index.php?rp=/store/ssl-certificates">
SSL Certificates
</a>
</li>
<li menuitemname="Shop Divider 2" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_2">
<a href="">
-----
</a>
</li>
<li menuitemname="Register a New Domain" id="Primary_Navbar-Store-Register_a_New_Domain">
<a href="/cart.php?a=add&domain=register">
Register a New Domain
</a>
</li>
<li menuitemname="Transfer a Domain to Us" id="Primary_Navbar-Store-Transfer_a_Domain_to_Us">
<a href="/cart.php?a=add&domain=transfer">
Transfer Domains to Us
</a>
</li>
</ul>
</li>
<li menuitemname="Announcements" class="" id="Primary_Navbar-Announcements">
<a href="/index.php?rp=/announcements">
Announcements
</a>
</li>
<li menuitemname="Knowledgebase" class="" id="Primary_Navbar-Knowledgebase">
<a href="/index.php?rp=/knowledgebase">
Knowledgebase
</a>
</li>
<li menuitemname="Network Status" class="" id="Primary_Navbar-Network_Status">
<a href="/serverstatus.php">
Network Status
</a>
</li>
<li menuitemname="Contact Us" class="" id="Primary_Navbar-Contact_Us">
<a href="/contact.php">
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li menuitemname="Account" class="dropdown" id="Secondary_Navbar-Account">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Account
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Login" id="Secondary_Navbar-Account-Login">
<a href="/clientarea.php">
Login
</a>
</li>
<li menuitemname="Register" id="Secondary_Navbar-Account-Register">
<a href="/register.php">
Register
</a>
</li>
<li menuitemname="Divider" class="nav-divider" id="Secondary_Navbar-Account-Divider">
<a href="">
-----
</a>
</li>
<li menuitemname="Forgot Password?" id="Secondary_Navbar-Account-Forgot_Password?">
<a href="/pwreset.php">
Forgot Password?
</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</section>
Code:
section#header {
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
Now when I add the position fixed and try to make it uncontrollable the white part and logo area no longer scroll however before i even begin to scroll my menu bar is pushed up and out of position.
Picture now fixed you can see the menu bar has changed its location. Here is the new code
section#header {
position: fixed;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
This is not a z-index issue as this is happening before i even scroll down the page.
I have been stuck for days I would really be grateful for any help.
UPDATE: Okay I have the fixed menu where it is supposed to be but now I am having this issue with every page and I have no idea why every div and section has moved up as if the header doesnt exist. mind you this is before any scrolling begin. Please feel free to visit webking.com and navigate to any page to see what I mean.
As you can see a huge mess
Thanks
So here is my last corrections :
1st step fix the header :
section#header {
position: fixed; /* We want the header fixed at top */
z-index: 1000; /* We want header over other elements when scrolling */
/* margin: -5px 0 0 0; */ /* Remove seems not needed */
height: 60px; /* We should fix the header height */
width: 100%; /* header will take all available width */
background-color: #fff;
border-radius: 5px 5px 0 0;
}
2nd step fix the menu :
section#main-menu {
/* margin: 60px auto 0; */ /* It is not the place for the marin-top. We don't need this */
position: fixed; /* We want the menu fixed at top */
width: 100%;
background-color: #006687;
top: 60px; /* We want menu above the header so we shift the menu of the height of the header */
z-index: 1000; /* We want menu over other elements when scrolling */
}
3rd step correction of the content :
Here, I don't understand why (maybe need more investigations) but
the browser take the margin-top of the section#main-body and
apply it to the header. It's is not what we want and it's here we
will fix it with this :
We will add and apply the margin-top trick to the
.container inside the section#main-body
like this :
section#main-body .container {
margin-top: 100px; /* header : 60 + menu : 40 */
}
I'm having trouble getting a drop-down menu inside another dropdown menu to work. The first level dropdown works fine, but for the second level, when I click on the option for the dropdown menu (Learning Profiles) nothing happens... the menu fails to display.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class="dropdown">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
there is little change in the html
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class ="dropdown-submenu">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
and add the following css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
also you need to add javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
working plunker : https://plnkr.co/edit/jjrowMvX3FJ7OAsFpiaA?p=preview
I am working on making a collapsible element
I want to access
<div id="class1">
<ul>
<li> <a href="#" >link 1</a></li>
<li> <a href="#" >link 2</a></li>
<ul class="submenu">
<li> <a href="#" >link 1-1</a></li>
<li> <a href="#" >link 1-2</a></li>
</ul>
</ul>
I want to change the color of linki 1-1 when the link 2 is active or hide it when the link 2 is inactive.
Hope I am being clear here.
Just created a rough mockup for achieving the desired result. Please note there are many ways of achieving and this is only a way
$("#drop").click(function() {
$(".item").toggle("active")
})
.active {
display: block;
}
.item {
display: none
}
.item a {
text-decoration:none;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="class1">
<ul>
<li> link 1
</li>
<li> link 2
<ul class="submenu">
<li class="item"> link 1-1
</li>
<li> link 1-2
</li>
</ul>
</li>
</ul>
i'm having trouble centering my branding logo vertically in the center. As of right now my rendered html looks like this:
<a class='navbar-brand' href='#'>
<img alt="brand" height="200%" src="/assets/logo.png" />
If I don't set the height to a size, it will be the full size of the png. But my branding isn't vertically center with the rest of my navbar.
My css for the navbar-brand looks like this:
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
What do I need in my css to make this center with the navbar?
This is the full render of the navbar, pulled right from bootstrap docs.
<nav class='navbar navbar-default' role='navigation'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<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='#'>
<img alt="brand" height="200%" src="/assets/logo.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'>
<a href='#'>Link</a>
</li>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class='navbar-form navbar-left' role='search'>
<div class='form-group'>
<input class='form-control' placeholder='Search' type='text'>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
You can try use absolute positioning:
.navbar-brand {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: // half the width of your img
}
I'm new to bootstrap and am having a bit of trouble positioning a fluid dropdown menu. I would like to have it in the center or my page and have tried a few things, but it's not quite right.
I have tried to add a class of span6 and then add float: none; margin: 0 auto; to the css, and this does center it, but when the responsive menu kicks in it's somewhere between the middle instead of the left side. This also messes with the menu items.
I have also tried placing text-align:center; in various places to see if that would do anything, but it doesn't seem to effect anything.
Any help would be wonderful!
Here is my html
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
set margin-left:auto; margin-right:auto on ul with class nav
In Bootstrap.css line: 3102 edit
.nav > li > a {
/* display: block; */
}
Edit the bootstrap.css file line: 3638 to 3651 as shown:
.navbar .nav {
position: relative;
left: 0;
display: block;
/* float: left;
*/ margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav > li {
/* float: left; */
}
For the following HTML works. It displays the menu center aligned.
<html>
<head>
<link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
<style>
.navbar-inner {
text-align: center !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 navbar-inner" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>