How to place toggle (show/hide) button near parent element?
When I press button to show child elements, this button jumps to the bottom of list, but I need it to stay in place - near parent element.
An example of current situation is under the question.
$(".has_children").append("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).prev().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
Add the button before the child element.And in jquery toggle the element next to the button
$(".has_children").find('ul.children').each(function(){
var html = $("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
html.insertBefore($(this));
})
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<!--<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
</li>
<li class="cat-item cat-item-32 has_children">Parent product category2
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27 has_children">Parent product category3
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
This works:
$(".has_children>a").after("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
Related
I am triying to figure out why my toggle icon is not showed,and why the nav bar is not showing the menu elements when I use the mobile view.
I have created a border to see if the icon is there,and I can see the red frame,but when I click on it,does not work,and is not showing any content.
Can someone please help me.
This is my code so far:
<header>
<div class="jumbotron">
<div class="container text-center">
<div class="intro-video">
<video class="videobaner" id="video" preload autoplay="true" loop="loop" muted="muted" volume="0">
<source src="img/background.mp4" type="video/mp4">
<source type="video/webm" src="img/theremin2.mp4"></source>
</video>
</div>
</div>
</header>
<nav class="navbar navbar-expand-md" style="width:auto;background-color:black;">
<div class="container-fluid mb-2 mt-2">
<div class="navbar-collapse collapse flex justify-content-md-center">
<ul class="navbar-nav mr-auto align-center">
<li class="nav-item">
<a class="nav-link" href="music.php"> MUSIC </a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.php"> EVENTS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">FEATURED</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="arts.php">ARTS</a></li>
<li><a class="dropdown-item" href="blog.php">BLOG</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SUBSCRIPTION </a>
</li>
</ul>
</div>
<div class="d-flex flex-md-fill flex-shrink-1 d-md-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
</div>
</div>
</div>
</nav>
<style>
header .jumbotron{
position: relative;
background-color: black;
height: 100%;
min-height: 40rem;
width: 100%;
overflow: hidden;
}
nav {
opacity: 80%;
padding: 20px;
/* position: relative; */
z-index: 9999;
margin: 0;
width: 50%;
left: 0px;
right: 0px;
bottom:0px;
border-radius: 1px;
color: white !important;
}
.container-fluid {
height:30px;
}
nav ul {
text-transform: uppercase;
padding:20px 35px;
margin: 0;
font-size: .450rem;
font-weight: 400;
color: white!important;
}
nav ul li {
display:inline-block;
text-align: center;
padding:20px 35px;
height: 1%;
}
nav ul a {
height:35px;
line-height:20px;
padding:16px 32px;
margin: 4px 2px;
color:white !important;
font-size: 20px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
text-decoration:none;
}
nav ul a:hover {
padding: 20px;
border-radius: 15px;
color: white!important;
}
</style>
Bootstrap5 uses data-bs-toggle and data-bs-target for the toggler. Change
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
to
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".collapsenav">
<span class="navbar-toggler-icon" style="color:white;border:2px solid red;"></span>
</button>
More on the Bootstrap5 toggler
Please someone help me. Im new to coding, I'm trying to highlight the active menu item. I have been searching for almost two weeks, but it is still not resolved. I have tried with Jquery CDN; it works, but when I upload all this to the web, it doesn't work. When I click the menu, it highlights, then disappears suddenly. So it didn't work with Jquery CDN.
here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</div>
</div>
</nav>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</ul>
</div>
</div>
<!-- Main variables *content* -->
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript">
$("#toi").click(function(e) {
e.preventDefault();
$("#main-wrap").toggleClass("launched");
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$(".mobileSearch a").click(function(e){
e.preventDefault();
$(".search-bar").toggleClass("toggleSearch");
});
} else {
$('#main-wrap').addClass('launched');
}
/*$(window).scroll(function() {
var nav = $('#scrollNav');
if ($(window).scrollTop() >= 10) {
nav.addClass('fixedNav');
} else {
nav.removeClass('fixedNav');
}
});*/
</script>
</body>
</html>
here is the css
}
.dahshat-board .navbar-default {
background-color: transparent;
border-color: transparent;
padding: 10px 0;
margin: 0;
background-image: none;
}
.nav-bottom {
position: relative;
z-index: 3;
}
.nav.page-navigation {
background: #fad534;
border-radius: 500px;
display: flex;
width: 100%;
position: relative;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
justify-content: center;
}
.nav.page-navigation li {
display: inline-flex;
width: auto;
align-items: center;
flex: 0 0 10.85%;
flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
display: block;
width: auto;
text-align: left;
}
.nav-bottom .nav li .ico {
margin-right: 4px;
width: 28px;
height: 28px;
background: #2b1f60;
border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
background: #fad534;
border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
font-size: 13px;
line-height: 44px;
color: #2a1e5e;
display: flex;
justify-content: center;
position: relative;
align-items: center;
padding: 2px 9px;
border-radius: 500px;
white-space: pre;
width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
/* background: transparent;
border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
background: transparent;
outline: none;
}
.nav-bottom .nav .dropdown li a {
line-height: 18px;
display: block;
padding: 4px 10px;
position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}
.nav-bottom .nav li.active a {
color: #fad534;
background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
display: none;
}
please help
Not an answer as such but I corrected your HTML markup as best I could - it now validates correctly so that in itself might be a help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name='keywords' content='' />
<meta name='description' content='' />
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<!--///////////////////////////////////////////////////////////////////////
The element "button" must not appear as a descendant of the "a" element.
The hyperlink has been removed from the DOM which might affect your
layout
/////////////////////////////////////////////////////////////////////////-->
<!--
<a class="navbar-brand" href="/"></a>
-->
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Main variables *content* -->
<script src='//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js'></script>
<script>
$('#toi').click(function(e) {
e.preventDefault();
$('#main-wrap').toggleClass('launched');
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$('.mobileSearch a').click(function(e){
e.preventDefault();
$('.search-bar').toggleClass('toggleSearch');
});
} else {
$('#main-wrap').addClass('launched');
}
</script>
</body>
</html>
The original code, run through the W3c validator produced the following results... as you will see it gave up hope and bailed!
If the markup alters the layout significantly look again at the css and judge whether the above markup was your intended layout. With valid markup you should have fewer problems going forward I hope.
I have added sub menu items to my main menu navigation, but they are not showing at all?
I have checked the css, and do not see any code that would hide the sub menu.
ul.art-hmenu {
display: inline-block;
vertical-align: middle;
padding-left: 13px;
padding-right: 13px;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
table, ul.art-hmenu {
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}
.art-hmenu {
float: right;
}
<ul class="art-hmenu menu-2">
<li class="menu-item-12 active"><a title="Home" href="http://agl.run-time.co.za/" class="active">Home</a> </li>
<li class="menu-item-14"><a title="Find Us" href="http://agl.run-time.co.za/find-us/">Find Us</a> </li>
<li class="menu-item-105"><a title="Facilities" href="http://agl.run-time.co.za/facilities/">Facilities</a> </li>
<li class="menu-item-207"><a title="Tours" href="http://agl.run-time.co.za/tours/">Tours</a> </li>
<li class="menu-item-229"><a title="Conferences" href="http://agl.run-time.co.za/conferences/">Conferences</a> </li>
<li class="menu-item-67"><a title="Contact" href="http://agl.run-time.co.za/contact/">Contact</a> </li>
<li class="menu-item-234"><a title="About Us" href="http://agl.run-time.co.za/about-us/">About Us</a> </li>
</ul>
What am I overlooking or doing wrong that is hiding my sub menu?
<ul class="art-hmenu menu-2">
<li class="menu-item-12 active"><a title="Home" href="http://agl.run-time.co.za/" class="active">Home</a>
</li>
<li class="menu-item-14"><a title="Find Us" href="http://agl.run-time.co.za/find-us/">Find Us</a>
<ul class="with-your-submenu-css-class">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li class="menu-item-105"><a title="Facilities" href="http://agl.run-time.co.za/facilities/">Facilities</a>
</li>
<li class="menu-item-207"><a title="Tours" href="http://agl.run-time.co.za/tours/">Tours</a>
</li>
<li class="menu-item-229"><a title="Conferences" href="http://agl.run-time.co.za/conferences/">Conferences</a>
<ul class="with-your-submenu-css-class">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li class="menu-item-67"><a title="Contact" href="http://agl.run-time.co.za/contact/">Contact</a>
</li>
<li class="menu-item-234"><a title="About Us" href="http://agl.run-time.co.za/about-us/">About Us</a>
</li>
</ul>
ul.art-hmenu {
display: inline-block;
vertical-align: middle;
padding-left: 13px;
padding-right: 13px;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
table, ul.art-hmenu {
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}
.art-hmenu {
float: right;
}
I have the basic navigation bar for all my pages in header.php so how do it make it active so people know which page they are on via the navigation bar
HTML
<ul class="menu">
<li>HOME</li>
<li>SMARTRETAIL FEATURES</li>
<li>FREQUENTLY ASKED QUESTIONS</li>
<li>CUSTOMERS</li>
<li>CONTACT US</li>
<li>USER GUIDE</li>
</ul>
CSS
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.menu li {
float: left;
border-right: 1px solid black;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.menu li a:hover:not(.active) {
background-color: #000000;
}
.active {
background-color: #2676f5;
}
if php refer to the answer here How to set current page "active" in php
in short
// set this above the include of the nav
$activePage = "offnungszeiten.php";
$pages = array();
$pages["index.php"] = "Öffnungszeiten";
$pages["features.php"] = "Sauna";
$pages["faq.php"] = "Frauensauna";
$pages["custom.php"] = "Beauty Lounge";
$pages["feiertage.php"] = "Feiertage";
//menu.php
<?php foreach($pages as $url=>$title):?>
<li>
<a <?php if($url === $activePage):?>class="active"<?php endif;?> href="<?php echo $url;?>">
<?php echo $title;?>
</a>
</li>
<?php endforeach;?>
Try this:
<ul class="menu">
<li>HOME</li>
<li>SMARTRETAIL FEATURES</li>
<li>FREQUENTLY ASKED QUESTIONS</li>
<li>CUSTOMERS</li>
<li>CONTACT US</li>
<li>USER GUIDE</li>
i've got a problem with the responsive bootstrap theme, in the admin panel i've got a top and a left navbar, everything ok there but when i go to reduced view such as mobile, the left bar comes up as a second top bar(that is what i want it to do) but the problem is that it overlaps part of the content, because i have a padding-top thinking on only one bar, so i don't want to double that padding because in a normal view i'll have a blank space wich i don't want.
So how can i make a different padding-top for normal view and reduced view.
Here is the code:
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<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="{!!URL::to('/')!!}">SCM</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li><i class="fa fa-home fa-fw"></i>
<!-- /.dropdown -->
<li class="dropdown">
<i class="fa fa-user fa-fw"></i><span class="caret"></span>
<ul class="dropdown-menu">
<li>Perfil</li>
#if(Auth::user()->type_id == 1)
<li>Administrar</li>
#endif
<li role="separator" class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i>Logout</li>
</ul>
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li <?php if(isset($section)){echo (($section=="user")?"class=\"active\"":"");}?> >
<i class="fa fa-users fa-fw"></i> Usuario<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/user/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/user')!!}"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="search")?"class=\"active\"":"");?> data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="exercise")?"class=\"active\"":"");}?>>
<i class="fa fa-tags fa-fw"></i> Ejercicios<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/exercise/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/exercise')!!}"><i class='fa fa-list-ol fa-fw'></i>Listar</a>
</li>
<li><i class="fa fa-certificate"></i> Categoria<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity')!!}"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="config")?"class=\"active\"":"");}?> >
<i class="fa fa-cogs fa-fw"></i> Configuración<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="personal")?"class=\"active\"":"");?>
href="{!!URL::to('/config/personal')!!}"><i class='glyphicon glyphicon-user'></i> Información personal
</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="mail")?"class=\"active\"":"");}?> >
<i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
#yield('content')
</div>
</div>
<!-- /#wrapper -->
</body>
The css for this:
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
Thanks.
you have to adjust the padding for the minimum screen size:
for example,
.nav-bar{
padding-top : xxpx;
}
putting the above on the css, obviously will apply to any screen size.
#media(min-width:416px) {
.nav-bar{
padding-top : /*your value*/px;
}
}
The above will make sure that the necessary padding level will be set only after the screen size reaches the 416px amount.
This was just an example amount I got to an iPhone 6 screen with assumed css classes, make sure you play around with the values for your relevant css classes to get whats most ideal for you.