I am editing a Joomla template and I want to keep the menu and the header fixed when scrolling. The problem is when I set the position to fixed for both, the menu div moves up to the same position as the header div which is (0,0) and also the header div seems to have a different position than before as there is overlap between it and the slider underneath.
I am new to web development and I don't know why this is happening.
Screenshot 1 : Without setting the #yt_header and #yt_menuwrap to fixed positions.
Screenshot 2: #yt_menuwrap set to position fixed.
Screenshot 3: Both set to position fixed.
Screenshot 4 : #yt_menuwrap and #yt_header set to fixed with a z-index:-99999 for yt_header.Focus on the flag and the sky and compare them with the following screenshots.
#yt_menuwrap {
background: #D3D3D3;
margin: 0;
position: fixed;
z-index: 98;
width: 100%
}
#yt_header {
position: fixed;
z-index: 100;
padding: 0;
background-color: #f9fafc;
background-color: white;
width:100%;
left:0;
top:0;
}
<body id="bd" class="homepage home-layout1 res">
<div id="yt_wrapper" class="layout-wide">
<header id="yt_header" class="block">
<div class="container">
<div class="row">
<div id="search" class="col-md-12">
<form id="mod-finder-searchform" action="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14" method="get" class="form-search">
<div class="finder">
<label for="mod-finder-searchword" class="element-invisible finder">Search</label>
<input type="text" name="q" id="mod-finder-searchword" class="search-query input-medium" size="25" value="" placeholder="Search ...">
</div>
</form>
</div>
<div id="yt_logo" class="col-md-5 hidden-sm hidden-xs">
<a class="logo" href="http://localhost:8888/home/" title="الجامعة التكنولوجيه">
<img data-placeholder="no" src="./UOT_files/uotlogo210new1.png" alt="الجامعة التكنولوجيه" style="width:61px;height:85px;">
</a>
</div>
<div id="title" class="col-md-2">
<!-- BEGIN: Custom advanced (www.pluginaria.com) -->
<div class="namePART1">
<p id="uniNamePART1">UNIVERSITY OF</p>
</div>
<div class="namePART2">
<p id="uniNamePART2">TECHNOLOGY</p>
</div>
<!-- END: Custom advanced (www.pluginaria.com) -->
</div>
<div id="icons-top" class="col-md-4">
<ul class="menu ">
<li class="item-1768"><a class="circle" href="http://localhost:8888/home/index.php/en/site-map">AR</a>
</li>
<li class="item-1770"><a class="circle fa-search" href="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14"> </a>
</li>
<li class="item-1771"><a class="circle fa-graduation-cap" href="http://localhost:8888/home/index.php/en/2016-09-17-19-47-04"> </a>
</li>
</ul>
</div>
</div>
</div>
</header>
<nav id="yt_menuwrap" class="block">
<div class="container">
<div class="row">
<div id="test" class="col-sm-12 hidden-sm hidden-xs">
<ul class="menu ">
<li class="item-1763 active">STAFF
</li>
<li class="item-1764">FACULTY
</li>
<li class="item-1765">RESEARCH
</li>
<li class="item-1766">NEWS
</li>
<li class="item-1767">IMPORTANT SITES
</li>
</ul>
</div>
<div id="yt_mainmenu" class="col-md-12 co-sm-12 ">
<ul id="meganavigator" class="clearfix navi ">
<li class="active level1 first ">
<a title="HOME" class="active level1 first item-link" href="http://localhost:8888/home/"><span class="menu-title">HOME</span></a>
</li>
<li class="level1 havechild ">
<a title="UNIVERSITY" class="level1 havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">UNIVERSITY</span></a>
<!-- open mega-content div -->
<div class="level2 menu mega-content" style="display: none;">
<div class="mega-content-inner clearfix">
<div class="mega-col first one">
<ul class="subnavi level2">
<li class="level2 first havechild ">
<a title="About University" class="level2 first havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">About University</span></a>
<!-- open mega-content div -->
<div class="level3 menu mega-content" style="display: none;">
<div class="mega-content-inner clearfix">
<div class="mega-col first one">
<ul class="subnavi level3">
<li class="level3 first ">
<a title="Mission and objectives of the university" class="level3 first item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/mission-and-objectives-of-the-university"><span class="menu-title">Mission and objectives of the university</span></a>
</li>
<li class="level3 ">
<a title="Members of the University Council" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/members-of-the-university-council"><span class="menu-title">Members of the University Council</span></a>
</li>
<li class="level3 ">
<a title="Organizational Chart" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/organizational-chart"><span class="menu-title">Organizational Chart</span></a>
</li>
<li class="level3 ">
<a title="Laws and regulations" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/laws-and-regulations"><span class="menu-title">Laws and regulations</span></a>
</li>
<li class="level3 ">
<a title="Category university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/category-university"><span class="menu-title">Category university</span></a>
</li>
<li class="level3 ">
<a title="History of the university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/history-of-the-university"><span class="menu-title">History of the university</span></a>
</li>
<li class="level3 ">
<a title="University landmarks" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-landmarks"><span class="menu-title">University landmarks</span></a>
</li>
<li class="level3 last ">
<a title="University logo" class="level3 last item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-logo"><span class="menu-title">University logo</span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
Try this code:
#yt_menuwrap {
background: #D3D3D3;
margin: 0;
position: fixed;
z-index: 999;
width: 100%;
top: 0px;
}
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if (jQuery(window).scrollTop() >= 300) {
jQuery('#yt_wrapper').addClass('fixed-header');
}
else {
jQuery('#yt_wrapper').removeClass('fixed-header');
}
});
});
</script>
<style>
.fixed-header { position: fixed; top:0; left:0; right: 0; width: 100%; background-color: #fff; z-index: 1010; margin: 0;
}
</style>
Related
The Goal
To make the header sticky when this responsive HTML5 template is resized to mobile phone dimensions.
The Problem
I cannot seem to find the correct element to add the CSS position property to. No matter what DIV I add the 'sticky' class to, it just won't stay fixed to the top of the screen.
In Action
Desktop Mode Works Fine
Mobile Size Fails
Failed Attempts
I have tried to attach a class, like this...
.makeSticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
...to every element even remotely close to the header. I just can't find the right one, and get it working.
Live
Here is the page running on a server: http://stpete.epizy.com/en/index.html
Code
<header class="header-area header-3">
<div class="desktop-nav d-none d-lg-block">
<div class="header-nav">
<div class="container-fluid custom-container">
<div class="header-nav-wrapper d-flex justify-content-between">
<div class="header-static-nav">
<p>Get FREE Shipping with <span class="text">$35!</span> Code: FREESHIPPING</p>
</div>
<div class="header-menu-nav">
<ul class="menu-nav">
<li>
<div class="dropdown">
<button type="button" id="setting" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Setting <i class="icon ion-chevron-down"></i></button>
<ul class="dropdown-menu" aria-labelledby="setting">
<li>Checkout</li>
<li>Sign in</li>
</ul>
</div>
</li>
<li>
<div class="dropdown">
<button type="button" id="langue" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/1.jpg" alt=""> English <i class="icon ion-chevron-down"></i></button>
<ul class="dropdown-menu" aria-labelledby="langue">
<li><img src="images/1.jpg" alt=""> English</li>
<li><img src="images/2.jpg" alt=""> Spanish</li>
</ul>
</div>
</li>
</ul>
</div> <!-- header menu nav -->
</div> <!-- header nav wrapper -->
</div> <!-- container -->
</div> <!-- header nav -->
<div class="header-middle">
<div class="container-fluid custom-container">
<div class="row">
<div class="col-lg-3">
<div class="header-logo-contact d-flex ">
<div class="desktop-logo">
<a href="index.html">
<img src="images/logo-white.png" alt="Global Eletronics, LLC">
</a>
</div> <!-- desktop logo -->
</div>
</div>
<div class="col-lg-9">
<div class="header-search-cart d-flex align-items-center">
<div class="header-contact d-flex align-items-center">
<i class="icon ion-ios-telephone-outline"></i>
<div class="phone media-body">
<p>24/7 Support</p>
+727-623-0753
</div>
</div>
<div class="header-search media-body">
<form action="#">
<div class="search-category">
<select>
<option value="">All categories</option>
<option value="audio">Audio Parts</option>
<option value="accessories">- - Accessories</option>
<option value="buzzers">- - Buzzers</option>
<option value="batteries">Battery Products</option>
<option value="batteries">- - Primary Batteries</option>
</select>
</div>
<input id="search-box" type="text" placeholder="Part #">
<button><i class="icon ion-android-search"></i></button>
</form>
</div>
<div class="header-cart">
<div class="cart-btn">
<a href="cart.html">
<i class="icon ion-calculator"></i>
<span class="text">RFQ Parts :</span>
<span class="count">0</span>
</a>
</div>
<!--
<div class="mini-cart">
<ul class="cart-items">
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<img src="images/cart-1.jpg" alt="product">
<span class="product-quantity">1x</span>
</div>
</div>
</li>
</ul>
<div class="price_content">
<div class="cart-subtotals">
</div>
<div class="cart-total price_inline">
<span class="label"># Items</span>
<span class="value">12</span>
</div>
</div>
<div class="checkout text-center">
Send RFQ
</div>
</div>
-->
</div>
</div> <!-- header search cart -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- header middle -->
<div class="header-menu">
<div class="container-fluid custom-container">
<div class="row">
<div class="col-lg-3">
<div class="header-menu-vertical">
<h4 class="menu-title">
<span>Parts by</span>
Category
</h4>
<ul class="menu-content menu-expand">
<li class="menu-item">
Semiconductor
</li>
<li class="menu-item">
Passives
</li>
<li class="menu-item">ElectroMechanical</li>
<li class="menu-item">Power & Circuit</li>
<li class="menu-item">Automation</li>
<li class="menu-item">Connectors</li>
<li class="menu-item">Cables & Wires</li>
<li class="menu-item">Test</li>
</ul> <!-- menu content -->
</div> <!-- header menu vertical -->
</div>
<div class="col-lg-9 position-static">
<div class="header-horizontal-menu">
<ul class="menu-content">
<li class="active">Home
</li> <li class="position-static">Products <i class="fal fa-chevron-down"></i>
<ul class="mega-sub-menu d-flex flex-wrap">
<li>
<a class="menu-title" href="#">Shop Grid</a>
<ul class="submenu-item">
<li>Shop Grid Column 3</li>
<li>Shop Grid Column 4</li>
<li>Shop Grid left sidebar</li>
<li>Shop Grid Right sidebar</li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop List</a>
<ul class="submenu-item">
<li>Shop List</li>
<li>Shop List Left sidebar</li>
<li>Shop List Right sidebar</li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop Single</a>
<ul class="submenu-item">
<li>Shop Single</li>
<li>Shop Variable</li>
<li>Shop Affiliate</li>
<li>Shop Group</li>
<li>Shop Tabs 2</li>
<li>Shop Tabs 3</li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop Single</a>
<ul class="submenu-item">
<li>Shop Slider</li>
<li>Shop Gallery Left sidebar</li>
<li>Shop Gallery Right sidebar</li>
<li>Shop Sticky Left sidebar</li>
<li>Shop Sticky Right sidebar</li>
</ul>
</li>
<li class="custom-banner">
<img src="images/custom_banner.jpg" alt="" class="img-responsive">
</li>
</ul>
</li>
<li>Services <i class="fal fa-chevron-down"></i>
<ul class="sub-menu">
<li>About</li>
</ul>
</li>
<li>Resources <i class="fal fa-chevron-down"></i>
<ul class="sub-menu">
<li>BOM Upload Tool</li>
<li>Global Learning Lab</li>
<li>Product Advisor</li>
<li>Articles</li>
</ul>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- header horizontal menu -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- header menu -->
</div> <!-- desktop nav -->
<div class="mobile-nav d-lg-none">
<div class="container-fluid">
<div class="mobile-nav-top">
<div class="row align-items-center">
<div class="col-sm-4 col-3">
<div class="mobile-toggle">
<a class="mobile-menu-open" href="javascript:;"><i class="fal fa-bars"></i></a>
</div>
</div>
<div class="col-sm-4 col-5">
<div class="mobile-logo text-center">
<a href="index.html">
<img src="images/logo-white.png" alt="Logo">
</a>
</div> <!-- mobile logo -->
</div>
<div class="col-sm-4 col-4">
<div class="mobile-account-cart">
<ul class="account-cart text-right">
<li>
<div class="dropdown">
<button type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fal fa-user"></i></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>My account</li>
<li>Checkout</li>
<li>Sign in</li>
</ul>
</div>
</li>
<li class="header-cart">
<a href="#">
<i class="fal fa-envelope-open-dollar"></i>
<span>0</span>
</a>
<div class="mini-cart">
<ul class="cart-items">
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<img src="images/cart-1.jpg" alt="product">
<span class="product-quantity">1x</span>
</div>
<div class="cart-item-content media-body">
<h5 class="product-name">New Balance Fresh Foam LAZR</h5>
<span class="product-price">€18.90</span>
<span class="product-color"><strong>Color:</strong> White</span>
<i class="fal fa-times"></i>
</div>
</div>
</li>
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<img src="images/cart-2.jpg" alt="product">
<span class="product-quantity">3x</span>
</div>
<div class="cart-item-content media-body">
<h5 class="product-name">New Balance Fresh Foam LAZR</h5>
<span class="product-price">€18.90</span>
<span class="product-color"><strong>Color:</strong> White</span>
<i class="fal fa-times"></i>
</div>
</div>
</li>
</ul>
<div class="price_content">
<div class="cart-subtotals">
<div class="products price_inline">
<span class="label">Subtotal</span>
<span class="value">€30.80</span>
</div>
<div class="shipping price_inline">
<span class="label">Shipping</span>
<span class="value">€7.00</span>
</div>
<div class="tax price_inline">
<span class="label">Taxes</span>
<span class="value">€0.00</span>
</div>
</div>
<div class="cart-total price_inline">
<span class="label">Total</span>
<span class="value">€37.80</span>
</div>
</div> <!-- price content -->
<div class="checkout text-center">
Checkout
</div>
</div> <!-- mini cart -->
</li>
</ul>
</div>
</div>
</div> <!-- row -->
</div> <!-- mobile nav top -->
<div class="header-search">
<form action="#">
<div class="search-category">
<select>
<option value="0">All categories</option>
<option value="12">Laptop</option>
<option value="13">- - Hot Categories</option>
<option value="19">- - - - Dresses</option>
<option value="20">- - - - Jackets & Coats</option>
<option value="21">- - - - Sweaters</option>
<option value="22">- - - - Jeans</option>
<option value="23">- - - - Blouses & Shirts</option>
</select>
</div>
<input type="text" placeholder="Enter your search key ... ">
<button><i class="icon ion-android-search"></i></button>
</form>
</div>
</div> <!-- container -->
<div class="mobile-off-canvas-menu">
<div class="mobile-canvas-menu-top">
<ul class="menu-nav">
<li><i class="fal fa-repeat"></i> Compare (0)</li>
<h6 class="custom-title">Women is Clothes & Fashion</h6>
<p>Shop women is clothing and accessories and get inspired by the latest fashion trends.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="menu-block">
<h6 class="custom-title">Simple Style</h6>
<p>A new flattering style with all the comfort of our linen.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="menu-block">
</ul>
</li>
<li class="menu-item-has-children">
<span>Outerwear & Jackets</span>
<li>Bags & Cases</li>
</ul> <!-- menu content -->
</div> <!-- mobile main menu -->
</div> <!-- mobile off canvas menu -->
<div class="overlay"></div>
</div> <!-- mobile nav -->
</header>
CSS
/*===== header 3 =====*/
.header-3 {
background-color: #1c2454; }
.header-3 .header-nav {
background-color: #000;
border-bottom: 0; }
.header-3 .header-nav .header-nav-wrapper .header-static-nav p {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-static-nav p .text {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li {
margin-left: 30px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li {
margin-left: 20px; } }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li::before {
color: rgba(255, 255, 255, 0.4); }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li a {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li .dropdown button {
color: #fff; }
.header-3 .header-contact i {
color: #fff; }
.header-3 .header-contact .phone p {
color: #fff; }
.header-3 .mobile-toggle a {
color: #fff; }
.header-3 .mobile-account-cart .account-cart li .dropdown button {
color: #fff; }
.header-3 .mobile-account-cart .account-cart li .dropdown button i {
font-size: 24px; }
.header-3 .mobile-account-cart .account-cart li a {
color: #fff; }
.header-3 .header-menu {
background-color: #1c2454;
border-top: 1px solid rgba(255, 255, 255, 0.4); }
.header-3 .header-menu.sticky {
border-top: 0; }
I inherited this project, and the HTML was purchased from some template company. I didn't write the HTML - so any help would be greatly appreciated.
Thank you.
The sticky position needs space, and for that to work, the .header-area class needs to be sticky. Only add this rule to your media query! I just tried it, and sticky position worked like this:
.header-area {
position: sticky;
top: 0;
z-index: 9999;
}
You need to specify position: fixed to mobile navigation. The desktop nav has the same property but also has a custom animation sticky. You may also want to adjust the element below it because the menu is now fixed.
#media and (max-width: 600px) { /* Target only devices below 600px */
.header-area {
position: fixed;
z-index: 999; /* So that it is not under the other elements */
background: #1c2454; /* It was transparent */
}
.slider-area {
top: 85px; /* Can change according to your liking */
}
}
Output:
I have multilevel vertical menu,when i try to go to second level ,second level menu disappears.(some old versions of browsers it works fine )
and the height of second level menu is also not equal to first level.i want to something like that
I have pasted my exisiting code on
http://codepen.io/anon/pen/Mwwdqd
though code is not working on codepen,you can copy the html,css in separate files.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<html lang="en">
<body>
<div id="wrapper">
<div class="main-content">
<div class="topnav">
<div class="account">
<ul><li>Nathan Smith</li>
</ul>
</div>
<div class="accountname">
<ul><li>My Account</li></ul>
</div>
<div class="logout">
<ul><li>Log Out</li></ul>
</div>
<div class="addtofav"><ul><li>Add to Favourties</li></ul></span></div>
<div class="name"><ul><li>Voyager</li></ul></span></div>
<div>zxczxc czx</div>
</div>
</div>
<div class="sidebar">
<div class="left">
<div class="row col-xs-6 col-sm-3 col-md-2 logo">
<div class="imageinbottomtextontop">
<div class="titletextimage_image">
<a href="/content/count/en/default.html" target="_top">
<img title="COUNT" style="width:px; height:px;" src="images/logo.png" alt="COUNT">
</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
<div id="left-menu">
<div>
<ul class="nav nav-pills nav-stacked mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
<li class="dropdown-submenu">Strategy & Technical</li>
<li class="dropdown-submenu">Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent last-level">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">
Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus menu-align"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus menu-align" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px;">Platforms</li>
<li style="padding: 10px 15px;">Managed Funds</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li class="dropdown-submenu">Implementation</li>
<li class="dropdown-submenu">Review</li>
<li class="dropdown-submenu">Execution Only</li>
</ul>
</li>
<li class="dropdown-submenu menu-align"><a href="#" >Personal Development</a></li>
<li class="dropdown-submenu menu-align "><a href="#" >Practice</a></li>
<li class="dropdown-submenu menu-align "><a href="#" >News</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
if (event.preventDefault) event.preventDefault()
else event.returnValue = false;
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
</script>
</body>
</html>
Remove margin-left: 25px; from .dropdown-submenu > .dropdown-menu
It disappears because when you try to hover into the second menu you run into that margin so you leave the initial element that maintains the hover state. Use padding instead.
Inspect the element with developer tools (right-click > Inspect) to better visually see the area around the element.
I want to create navigation bar [vertical] with bootstrap 3.
I tried this but it didn't work.
<ul class="nav nav-pils nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
I tried a lot of examples but it is all with old bootstrap. How to create that navigation with new bootstrap?
nav-pills class needs two l:
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
It looks like you are missing an l in nav-pills (you have it listed as nav-pils)
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
you could use the pills or you just could write this:
your html:
<!--navigation-->
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">LOGO</a>
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i><span> Link1 </span></li>
<li><i class="fa fa-info-circle"></i><span> Link2 </span></li>
<li><i class="fa fa-heart"></i><span> Link3 </span></li>
<li><i class="fa fa-briefcase"></i><span> Link4 </span></li>
<li><i class="fa fa-envelope"></i><span> Link5 </span></li>
</ul>
</div>
<!--end navigation-->
<!-- 1st section-->
<div class="wrapper">
<div class="container" id="home">
<div class="row">
<h2>Link 1</h2>
</div>
</div>
<!-- 2nd section-->
<div class="container" id="info">
<div class="row">
<h2>Link 2</h2>
</div>
</div>
<!--3rd section-->
<div class="container" id="love">
<div class="row">
<h2>Link 3</h2>
</div>
</div>
<!--4th section-->
<div class="container" id="work">
<div class="row">
<h2>Link 4</h2>
</div>
</div>
<!--5th section-->
<div class="container" id="contact">
<div class="row">
<h2>Link 5</h2>
</div>
</div>
</div>
your css:
/* CSS used here will be applied after bootstrap.css */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.container {
height: 1000px;
}
.wrapper {
margin-left: 140px;
}
working example here: bootply
I came late to the party but in case you just got here and you would like to add toggle to your vertical nav:
<nav class="list-group">
<ul class="nav">
<li>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
</a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>
<a href="#" class="list-group-item">
Item 2
</a>
</li>
<li>
<a href="#" class="list-group-item">
Item 3
</a>
</li>
</ul>
</li>
</ul>
</nav>
Use navbar-pills. It will work.
Below is mentioned HTML source for menu and sub menu,
i want to click on sub menu.
how to do that using selenium Webdriver.
below is HTML information of page.
<div id="topnav" class="row" role="navigation">
<div id="nav" class="row-980">
<div class="region region-nav">
//Top Navigation menu bar
<div id="block-menu-block--navigation-top" class="block block-menu-block">
<div class="content">
<ul class="muchomenu-menu muchomenu-menu-horizontal">
<li class="first leaf has-children active-trail active menu-mlid-838 muchomenu-parent on">
<span class="muchomenu-parent-title">
<div class="muchomenu-bin muchomenu-slots" style="left: 0px; right: auto; top: -9999px;">
</li>
<li class="leaf has-children menu-mlid-859 muchomenu-parent off">
<span class="muchomenu-parent-title">
<div class="muchomenu-bin muchomenu-slots" style="left: 111px; right: auto; top: -9999px;">
<div class="col-2">
<div class="col left margin_0_20_0_0">
<div class="panel-pane pane-menu-tree pane-main-menu">
<ul>
//first menu item in Menu
<li class="pane-title">
<a alignment="left" panel="our_businesses" href="/our-businesses/ukpil- overview">UKPIL</a>
</li>
<li class="first leaf menu-mlid-1195">
<li class="leaf has-children menu-mlid-1250">
<li class="last leaf has-children menu-mlid-976">
</ul>
</div>
</div>
<div class="col left margin_0_20_0_0">
<div class="clear"></div>
</div>
</div>
</li>
<li class="leaf has-children menu-mlid-835 muchomenu-parent special-center off">
<span class="muchomenu-parent-title">
<div class="muchomenu-bin muchomenu-slots" style="left: 0px; right: auto; top: -9999px;">
<div class="col-3">
<div class="col left margin_0_20_0_0">
<div class="panel-pane pane-menu-tree pane-main-menu">
<ul>
<li class="pane-title">
Customer commitment
</li>
<li class="first leaf menu-mlid-982">
<li class="last leaf menu-mlid-983">
</ul>
</div>
<div class="panel-separator"></div>
<div class="panel-pane pane-menu-tree pane-main-menu">
</div>
<div class="col left margin_0_20_0_0">
<div class="col left margin_0_20_0_0">
<div class="clear"></div>
</div>
</div>
</li>
<li class="leaf has-children menu-mlid-853 muchomenu-parent special-center off">
<li class="leaf has-children menu-mlid-860 muchomenu-parent special-center off">
<li class="leaf has-children menu-mlid-858 muchomenu-parent special off">
<li class="last leaf has-children menu-mlid-857 muchomenu-parent special off">
</ul>
</div>
</div>
</div>
I have created web application where I want to highlight the menu selected.
Below is what I have
<div style="width: 80%;" align="left" >
<span style="display:inline-block;" align="left" >
<div id="menubar" class="grid-block">
<nav id="menu">
<ul class="menu menu-dropdown ">
<li class="level1 item101 active">
<a href="index.xhtml" class="level1">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center">
</span>
Home
</span>
</a>
</li>
<li class="level1 item102 parent makeSpace default"
style="#{!PersonalInformationDataBean.pageViewData.contains('registerForPatentss') && !PersonalInformationDataBean.pageViewData.contains('success') && !PersonalInformationDataBean.pageViewData.contains('getReportss') && !PersonalInformationDataBean.pageViewData.contains('searhPatentss') ?'display:none':'display:inherit'};">
<a href="" class="level1 parent">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center">
</span>Projects/Inventions
</span>
</a>
<div class="dropdown columns1">
<div class="dropdown-bg" style="overflow: hidden; width: 239px; height: 202px; ">
<div>
<div class="width100 column">
<ul class="level2">
<li class="level2 item200" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('registerForPatentss')?'display:inherit':'display:none'}">
<a href="registerForPatentss.xhtml" class="level2">
<span>Register New Applicant
</span>
</a>
</li>
<li class="level2 item201" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('success')?'display:inherit':'display:none'}">
<a href="success.xhtml" class="level2">
<span>Register New Project
</span>
</a>
</li>
<li class="level2 item202" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('getReportss')?'display:inherit':'display:none'}">
<a href="getReportss.xhtml" class="level2">
<span>Project Reports
</span>
</a>
</li>
<li class="level2 item203" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('searhPatentss')?'display:inherit':'display:none'}">
<a href="searhPatentss.xhtml" class="level2">
<span>Search For Project
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="level1 item102 parent makeSpace default" style="#{!PersonalInformationDataBean.pageViewData.contains('systemLog') && !PersonalInformationDataBean.pageViewData.contains('addUser') && !PersonalInformationDataBean.pageViewData.contains('changePass') && !PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:none':'display:inherit'}">
<a href="" class="level1 parent">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center">
</span>Administrative
</span>
</a>
<div class="dropdown columns1">
<div class="dropdown-bg" style="overflow: hidden; width: 209px; height: 202px; ">
<div>
<div class="width100 column">
<ul class="level2">
<li class="level2 item200" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('addUserss')?'display:inherit':'display:none'}">
<a href="addUserss.xhtml" class="level2">
<span>Add User Account
</span>
</a>
</li>
<li class="level2 item201" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('logPatentSystemss')?'display:inherit':'display:none'}">
<a href="logPatentSystemss.xhtml" class="level2">
<span>System Log
</span>
</a>
</li>
<li class="level2 item202" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('changePass')?'display:inherit':'display:none'}">
<a href="changePass.xhtml" class="level2">
<span>Change Password
</span>
</a>
</li>
<li class="level2 item203" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:inherit':'display:none'}">
<a href="userlistss.xhtml" class="level2">
<span>Details Of Registered Users
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</span>
</div>
This gives me output as below (its not same, but somewhat like this).
Home | Projects | Administrative
| |
| |
|- Men 1 |- Ad 1
|- Men 2 |- Ad 2
|- Men 3 |- Ad 3
Now what I want to do is
When Men 1 is selected, <li class="level1 item102 parent makeSpace default" should change to <li class="level1 item102 parent makeSpace active" i.e. take out default and take in active class.
When I click on Ad 2, <li class="level1 item102 parent makeSpace default" should change to <li class="level1 item102 parent makeSpace active"
Any idea how to get this done? I check online, however examples I get was for Level 0 menu.
See The demo
jQuery:
$("#menubar").on("click","li",function(e){
e.preventDefault();
e.stopPropagation();
if($(this).hasClass("active"))
{
$(this).removeClass("active").addClass("default");
}
else
{
$(this).addClass("active").removeClass("default");
}
});
What I did is is below....
var myURL = window.location.toString();
var endIndex = myURL.lastIndexOf(".", myURL);
var startIndex = myURL.lastIndexOf("/")+1;
var pageAccessed = myURL.substr(startIndex, endIndex-startIndex);
if (pageAccessed=="successLoginss") {
$(".homemenu").addClass("active");
$(".homemenu").removeClass("default");
}
<li class="level1 item101 default homemenu">
<a href="index.xhtml" class="level1">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center">
</span>
Home
</span>
</a>
</li>
Dats it..... I know this is not right way, but I had to get done this way....