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;
Related
CSS:
border: 5px solid red;
}
#menu li{
font-size: 25px;
display:inline;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2" id="menu">
<ul class ="Menuitems">
<li>The Hub</li>
<li>FAQ</li>
</ul>
</div>
I am attempting to move the text in the li tags to the centre of the div. I cannot figure out the CSS to do so and I don't wish to use "position relative" "top: 5px" because it is bad practise and will mess up the responsive design element of the project. Text align is also not possible as the div is not large when it is full screen, see code pen for information
https://codepen.io/mdot700/pen/bGEGwLa
Found this with bootstrap
Source : https://www.codeply.com/go/bp/6COUMfNrEU
<div class="d-flex">
<ul class="list-inline mx-auto justify-content-center">
<li class="list-block-item">Item 1</li>
<li class="list-block-item">Item 2</li>
<li class="list-block-item">Item 3</li>
<li class="list-block-item">Item 4</li>
<li class="list-block-item">Item 5</li>
</ul>
</div>
Hi I am using this bootstrap templete https://bootstrapmade.com/demo/themes/BizPage/, the problem is that I need a image in the dropdown menu but it broke menu alignment, somebody can help?
The full code was too large to add here so I uploaded to this FIDDLE https://jsfiddle.net/Lgdohawm/
please on js fiddle editor layout choose
Columns Bottom results because It will show the full width result page
Part of menu - html only
<header id="header" style="background-color:black">
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Portfolio</li>
<!-- menu with image -->
<li class="menu-has-children"><img class="rounded-circle" width="45" src="https://picsum.photos/50/50"> #user
<ul>
<li>Drop Down 1</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
<li>Drop Down 5</li>
</ul>
</li>
<!-- menu with image -->
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
menu code is between html comments tag <!-- menu with image -->
Is there a reason you are using
float: left
for the menu items?
You can simply use
.nav-menu > li {
display: inline-block;
}
instead.
JSFiddle
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'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.
I got this problem that when I hover on my dropdown menu, the background changes and the color does also. But i can't get it to white..
What to do?
http://hcl.konggulerodhosting.dk/index.html
<nav>
<div id="topBar" data-toggler="is-active" class=" top-bar row ">
<button type="button" data-toggle="topBar" class="mobile__close hide-for-large"> </button>
<div class="small-12 columns">
<div class="top-bar-left">
<div class="site-logo"><img src="assets/images/logo.svg" alt=""></div>
</div>
<div class="top-bar-right">
<p class="mobile__headline hide-for-large">Menu</p>
<ul data-responsive-menu="drilldown large-dropdown" data-back-button="<li class="js-drilldown-back drilldown-back"><a>Back</a></li>" class="menu">
<li class="active">Forside</li>
<li>Undersøgelser
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
<li>Tilskud</li>
<li>Høreapparat</li>
<li>Information</li>
<li>Om os</li>
<li class="search__toggler">
<button type="button" data-toggle="search" id="search-toggler"></button>
</li>
</ul>
</div>
</div>
</div>
</nav>
.is-dropdown-submenu-item {
color:white;
}
is not working. So i dont know what to do..
Please don't link your site as it's bad for archiving purposes.
You need to change the link colour.
.is-dropdown-submenu-item a:hover {
color:#fff;
}
Check this image.............................................