I've been trying to make a fluid drop-down menu like the on in udemy(https://i.imgur.com/nrorrMo.png) but the options inside my drop-down doesn't appear. Is there is anything i'm doing wrong?
<ul class="nav navbar-nav">
<li class="dropdown">
Heading 1
<div class="dropdown-menu multi-column" style="width: 100%;">
<div class="row">
<div class="col-md-4">
<ul class="dropdown-menu">
<li>Opt 1</li>
<li> Opt 2</li>
</ul>
</div>
</div>
</li>
</ul>
Your error comes with the use of the class="dropdown-menu" on the UL tag inside of the div.dropdown-menu. If you remove that class, you will see the content inside the dropdown.
Related
I am working a little exercise on codepen and trying to style the tabs of navbar using boostrap, but when I was using the original code on the site or adding
class="list-inline"
It ended up with the items on each line like this.
Can anyone explain why that happened? I am using boostrap 4 and here is my code:
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
you would have to use list-inline-item class to the li item as well.
see the fiddle below
https://jsfiddle.net/pr6t58wL/
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Menu 1</li>
<li class="list-inline-item">Menu 2</li>
<li class="list-inline-item">Menu 3</li>
</ul>
</nav>
Please use this code I think it is work on your requirement.
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="youridname1">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="youridname1">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
</div>
</div>
I am trying to sliding down a sub menu. The reference which I am following is -- https://codepen.io/shshaw/pen/gsFch
But the dropdown doesn't slide. It just appears on hover.
Html code --
<nav id="main-nav" class="clearfix">
<div class="nav-inner clearfix">
<div class="menu-main-navigation-container">
<ul id="nav" class="clearfix page">
<li class="item">
Menu
<ul class="sub-menu">
<li class="item">Sub Menu 1</li>
<li class="item">Sub Menu 2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Demo -- https://jsfiddle.net/squidraj/seqc1w9f/6/
Any help is highly appreciated.
display cannot be animated. This needs to be removed.
ul#nav li ul {
display: none;
I have a navigation menu, with a collapsible list of child pages. Except the dropdown element needs to have an accessible page on the same line as well. This is what I have so far.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-lg-2">
<div class="navbar navbar-default navbar-fixed-side">
<ul class="nav" id="side-menu-0">
<li id="menu-template" class="nav">
<i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li id="menu-template-top" class="nav" role="menu">
Google
<span class="caret"></span>
<ul id="menu-template-top-sub" class="collapse nav nav-second-level">
<li class="nav">
Flot Charts
</li>
<li class="nav">
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
</div>
Here is the working fiddle, so you can see what I am trying to do. I want the Link for "Google" to stretch across to the right, like the "Dashboard" link can do. Working Fiddle
A simple fix for this is to do this:
Google
You could of course externalize this to a stylesheet if you wish.
The 40px in the calc(100% - 40px) is the width of your dropdown caret.
This makes it stretch all the way to the dropdown-expansion button.
Add display block to your <a> tag, instead of display inline-block. Block elements will span the entire width.
Can you please help me with this plunker:
https://plnkr.co/edit/ZDVUBAxMEFnoGV6GfL88?p=info
Not sure why plunker preview view not showing things. Please open a new
window by clicking right top button in preview view, which should show
something.
<div id="wrapper">
<div id="header" class="sticky shadow-after-3 clearfix">
<header id="topNav">
<div class="container">
<div class="navbar-collapse pull-left nav-main-collapse collapse submenu-dark">
<nav class="nav-main">
<ul id="topMain" class="nav nav-pills nav-main">
<li class="dropdown mega-menu">
<!-- PORTFOLIO -->
<a class="dropdown-toggle" href="#">
PORTFOLIO
</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-5th">
<ul class="list-unstyled">
<li>
<span>GRID</span>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#">1 COLUMN</a>
<ul class="dropdown-menu">
<li>SUB COLUMN 0</li>
<li>SUB COLUMN 1</li>
<li>SUB COLUMN 2</li>
<li>SUB COLUMN 3</li>
<li>SUB COLUMN 4</li>
</ul>
</li>
<li>
2 COLUMNS
</li>
<li>
3 COLUMNS
</li>
<li>
4 COLUMNS
</li>
<li>
5 COLUMNS
</li>
<li>
6 COLUMNS
</li>
</ul>
</div>
Mouse hover at GRID > 1 COLUMN, the sub column will pop up below. But this is not as expected. I expect the sub column to appear at right side of '1 COLUMN'. Please see the attached mock up for the expected behaviour. Not sure how to achieve that, please help, thanks!
I am using this navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
I am I'm trying to place the "Home" icon next to the word "Home" and place it in the same grey block, I am doing this:
<li class="active">Home<i class='glyphicon glyphicon-home'></i></li>
I have tried to place it in several places without success.
Thank you in advance.
Why not inside the anchor tag ?
<li class="active">
Home<i class='glyphicon glyphicon-home'></i>
</li>
Demo: http://jsfiddle.net/dhirajbodicherla/urnb1wha/
If you want the Home icon towards the extreme right use pull-right class to the glyphicon like this
<li class="active">
Home<i class='pull-right glyphicon glyphicon-home'></i>
</li>
Demo : http://jsfiddle.net/dhirajbodicherla/urnb1wha/1/