I am using Jasny Bootstrap for my responsive website. However, the links for the sub-navigations does not work on mobile. I am able to click into the links when I test it on my desktop. But when I test it on my phone, it only closes the navigation side bar. Following is my code:
<!--mobile nav-->
<nav id="mob-nav" class="navmenu navmenu-inverse navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><span>Home</span></li>
<li class="dropdown"><span>Courses</span> <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav" role="menu">
<li class="dropdown">Sub Nav 1</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 2</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 3</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 4</li>
</ul>
</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</nav>
<!--end mobile nav-->
Could it be a case of clashing js?
Edit: I did some trial and error and found that the class "navmenu-nav" is causing the problem. But I am still unsure how I can debug this.
These are the only js attached:
<script src="js/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jasny-bootstrap.js"></script>
<script src="js/readmore.js"></script>
Just found the answer!
Add: .navmenu-nav.dropdown-menu { position:relative; } to your CSS and like magic, it will work!
Related
I have included header.html in index.jsp using
<%# include file="include_files/header.html" %>
Now I want to include same header on multiple pages but the active tab should be set to different tab each time.
Please suggest.
The Header.html has this ul.
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<h1 class="logo mr-auto">Euc Stories</h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Courses</li>
<li>Trainers</li>
<li>Events</li>
<li>Pricing</li>
<li class="drop-down">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="drop-down">Deep Drop Down
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- .nav-menu -->
Get Started </div>
</header>
Send page name to each url ie index.html?page_name=home
Then call the page name variable from within your page
$page_name = $_GET['page_name'];
You could use a switch statement to set the active link
switch ($page_name){
case 'home':
$active ='active';
break;
case 'about':
$active1 ='active';
break;
case 'courses':
$active2 ='active';
break;
case 'trainers':
$active3 ='active';
break;
default:
// Set a default
}
Then set your links up to activate if the condition from the switch statement is true.
<li><a class="<?= $active; ?> nav-btn" href="#">Home</a></li>
<li><a class="<?= $active1; ?> nav-btn" href="#">about</a></li>
<li><a class="<?= $active2; ?> nav-btn" href="#">courses</a></li>
<li><a class="<?= $active3; ?> nav-btn" href="#">Teachers</a></li>
You will need to set a default. Maybe an if statement. if(!isset($page_name)){ $page_name="home"; }
I tried below one after each list.
Please suggest if any different more feasible approach.
header.jsp:
<%
String uri = request.getRequestURI();
String page_name = uri.substring(uri.lastIndexOf("/")+1);
System.out.println("Page Name: "+page_name);
%>
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<h1 class="logo mr-auto">Euc Stories</h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li <% if("index.jsp".equals(page_name) || page_name.length()==0) out.print("class=\"active\""); %>>Home</li>
<li <% if("about.jsp".equals(page_name)) out.print("class=\"active\""); %>>About</li>
<li <% if("courses.jsp".equals(page_name)) out.print("class=\"active\""); %>>Courses</li>
<li <% if("trainers.jsp".equals(page_name)) out.print("class=\"active\""); %>>Trainers</li>
<li <% if("events.jsp".equals(page_name)) out.print("class=\"active\""); %>>Events</li>
<li <% if("pricing.jsp".equals(page_name)) out.print("class=\"active\""); %>>Pricing</li>
<li class="drop-down">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="drop-down">Deep Drop Down
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li <% if("contact.jsp".equals(page_name)) out.print("class=\"active\""); %>>Contact</li>
</ul>
</nav>
<!-- .nav-menu -->
Get Started </div>
</header>
I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ
Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));
So now I finally got my pill dropdown working but another question then arose - as I use nav-justified to center my navbar, the pills are quite wide and the dropdown is all the way to the left of the pill. Can I center this dropdown in any way?
The JSFiddle looks like this: https://jsfiddle.net/htsda5xo/1/
A snippet of the HTML:
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>
Try this,
.nav-justified>.dropdown .dropdown-menu {
/* top: auto; */
left: 50%;}
Try this
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>
I have a menu structure, like this:
<nav id="main">
<ul id="nav-user">
<li class="user-name">
<span class="name">John Doe</span>
<ul class="submenu">
<li>Profile</li>
<li>Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
<ul id="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
I'm having an issue with ul.submenu. It's overlaying ul#nav-main, but for some reason it's transparent:
http://jsfiddle.net/JvALU/
I don't want to see the ul#nav-main. How can I change that?
z-index can only be used with elements that are positioned relative, absolute, or fixed. Try adding position: relative; to ul.submenu.
Hope this helps.
Code:
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services</li>
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
</div>
For CSS: I am using display:none on .the_one. Now once the services tab is hovered I want to then display .the_one. How can I do this? I tried doing:
li.the_one:hover {
display:block;
}
But that doesn't work either.
Your HTML is not valid. <ul> must have only <li> as children (and that includes other <ul>. Once you fix that, add these rules:
.the_one {
display: none;
}
.one_one:hover .the_one {
display: block;
}
http://jsfiddle.net/xvEvj/
You need to target the the inner list in your css to make it appear.
Change your css as below:
li.the_one:hover ul.the_one
{
display:block
}
the "li.the_one:hover" states that this will occur when the li with the class "the_one" is hovered over, then it applies a display:block to the ul with the class "the_one" inside the list item with the class "the_one".
Hope this helps.
Cheers.
Your HTML is not valid.
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
</li>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
The second unordered list should rest within a list item of the first unordered list.