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
Related
Currently I'm trying to replicate this navbar https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css/ for my webpage. This navbar is set on a fixed position so whenever I scroll, it stays in the particular position. I didn't want this, so I changed it to relative position. But doing so made the dropdowns in the navbar unusable as whenever I try to access the options, the dropdown goes away. How do I make it so that the navbar is not fixed and the dropdowns are still accessible.
CodeSandbox: https://codesandbox.io/s/quizzical-mopsa-71uzh?file=/src/App.tsx
Code:
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search"/>
<input type="checkbox" id="show-menu"/>
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content" style={{width:"100%"}}>
<div class="logo">Image</div>
<ul class="links">
<li>Home</li>
<li>About</li>
<li>
Features
<input type="checkbox" id="show-features"/>
<label for="show-features">Features</label>
<ul>
<li>Drop Menu 1</li>
<li>Drop Menu 2</li>
<li>Drop Menu 3</li>
<li>Drop Menu 4</li>
</ul>
</li>
<li>
Services
<input type="checkbox" id="show-services"/>
<label for="show-services">Services</label>
<ul>
<li>Drop Menu 1</li>
<li>Drop Menu 2</li>
<li>Drop Menu 3</li>
<li>
More Items
<input type="checkbox" id="show-items"/>
<label for="show-items">More Items</label>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</li>
<li>Feedback</li>
</ul>
</div>
</nav>
</div>
The Navbar which you want to copy can't be only possible with pure css.
So, You need to use javascript.
suppose you have you 2 div for the title (codingNepal) one is bigger which will hide
upon scroll down. and other div (part of navbar)will appear at once the first one disappear.
So, you can add classes to both lets say class names are biggerTitle and smallTitle
then you can add an event listener which will capture the scroll event and once you scroll down you can make biggerTitle {display: none} and smallTitle {display: block}
which has initial {display: none}.
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'm working on a menu system that has a horizontal menu bar with pop-out menus when hovering over each of the options. What I would like to see happen is that when you hover over a menu option, there is no wrapping of top-level sub options. If I define a static width for this content it works, nothing wraps, but this looks poorly designed for the menus with less content as there's unnecessary white space. If I add a white-space nowrap the content no longer wraps but the "container" UL doesn't automatically size to the correct size of the content that is contained within it when inline-block formatted (this is the iteration that is linked below). I would like to go with a nowrap solution where the parent UL for each LI menu is sized automatically so that i don't enforce an over sized boundary that has excess white space.
The menu is below:
<div class="container">
<ul id="nav">
<li>Home</li>
<li>generic
<span id="s1"></span>
<ul class="subs">
<li>generic</li>
<li>generic 1
<ul>
<li>generic 1</li>
<li>generic 2</li>
<li>generic 3</li>
<li>generic 4</li>
<li>generic 5</li>
</ul>
</li>
<li>Week 2
<ul>
<li>Day 1</li>
<li>Day 2</li>
<li>Day 3</li>
<li>Day 4</li>
<li>Day 5</li>
</ul>
</li>
<li>Week 3</li>
<li>Week 4</li>
<li>Continual Education</li>
</ul>
</li>
<li>generic
<span id="s2"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>Tech
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
</li>
<li>generic
</li>
</ul>
</li>
<li>generic
<span id="s3"></span>
<ul class="subs">
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
<span id="s4"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic/generic/generic</li>
<li>generic
<span id="s5"></span>
<ul class="subs">
<li>generic</li>
</ul>
</li>
</ul>
</div>
I'm linking the whole project via JSFidle because it's just too much to put here and there's linked content. Make note in the running version in JSFiddle that when you hover over a menu the black border (which is the box, in the final version it will just be a basic drop shadow) in most of the sub menus is smaller than the content - this is what I'm trying to solve.
JSFiddle Project
If you can help I greatly appreciate it!
Didn't find an answer here that matches quite my scenario, but have tried to consider answers for similar questions - to no avail.
In your #nav ul.subs > li class, you are setting side padding relatively with %.
Changing this to absolute value in px has fixed the problem - saved to your fiddle.
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!
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));