Hi I have created a navigation bar and I want to place a home image icon at the start of the navigation. However when I try to it either moves the other items down or when I hover over the icon the hover doesn't work properly.
<div id="nav">
<div id="nav_wrapper">
<ul>
<li class="icon-home"></li>
<li id="et"> England
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li id="et"> France
<ul>
<li>Ligue 1
</li>
</ul>
</li>
<li id="et"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li id="et"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li id="et"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
In the link below I managed to get the heading in line however the hover effect doesn't work. http://jsfiddle.net/mxohL7kL/
The home link has no text in it, that is why your hover effect is not the same height as the other link. What you could do is, gives the home anchor a text and hide it.
<!-- HTML -->
<li class="icon-home"><span>Home</span></li>
//css
.icon-home a span {
visibility:hidden;
}
see the example here
Related
I have started designing a website using HTML CSS Bootstrap and while making navigation menu dropdown menu is not coming on bringing mouse over instead its showing under it
I am hereby attaching the required code
<ul class="main-menu sf-menu">
<li class="active">Home</li>
<li>Know Your AO/Region/Branch
</li>
<li>HR Section
</li>
<li>General Banking
<ul>
<li> RajBhasha </li>
<li> Security </li>
<li> Miscellaneous </li>
</ul>
</li>
</li>
<li> Advances </li>
<li>IT Section
</li>
<li>Regions
<ul>
<li>Region 1:Nainital </li>
<li>Region 2: Almora </li>
<li>Region 3: Pithoragarh and Champawat </li>
<li>Region 4: Bageshwar and Chamoli </li>
<li>Region 5: Udham Singh Nagar </li>
</ul>
</li>
<li>News
</li>
</li>
<li>Staff Corner</li>
</ul> <!-- /.main-menu -->
</nav>
The result is like thisenter image description here
Please Help....
First add class "dropdwon" in li which you want to make dropdown. Second add class "dropdown-menu" on ul
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav mainNavigation">
<li class="active">Home </li>
<li> About Us </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li class="dropdown"> Molex Portfolio
<ul class="dropdown-menu">
<li> Fibre Products </li>
<li> Copper Products </li>
</ul>
</li>
<li>Contact Us </li>
<li> Employment Opp </li>
</ul>
</nav>
</div>
and add this css
.dropdown:hover .dropdown-menu{ display:block; }
Since adding a slide show into my site I now have a odd gap above my navigation bar. I am not sure on how to fix this. I tried what I did last time I had this happening but nothing ...
I have a JSfiddle set up: https://jsfiddle.net/7yj8rkbe/
HTML (for my nav bar):
<img src="img/Logo.png" id="logo">
<li>
Other
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li>
Store
<ul>
<li>Official</li>
<li>Community</li>
</ul>
</li>
<li>
Projects
<ul>
<li>Official</li>
<li>Community</li>
<li>Open Source</li>
</ul>
</li>
<li>
Forum
<ul>
<li>Programming</li>
<li>Technology</li>
<li>Gaming</li>
</ul>
</li>
<li>
<a id="nav-home" href="#">Home</a>
</li>
</ul>
#information {
top: 0;
}
You specified fixed positioning to that div but you forgot to set top value.
I am making a menu bar with sub menus. what i need while hovering mouse to menu the sub menu will appear and menu has to be highlighted. Please help me.....
<div class="side-bar">
<ul class="">
<li>Home
</li>
<li>About Us
</li>
<li>Portfolio
<ul>
<li>SELECTED PROJECTS
</li>
<li>program
<!-- i need this to be highlighted while cursoring sub menu -->
<ul>
<li>RESIDENTIAL
</li>
<li>HOSPITALITY
</li>
<li>INSTITUTION & COMMERCIAL
</li>
<li>INFRASTRUCTURE
</li>
<li>EDUCATIONAL
</li>
<li>COMMUNITY
</li>
<li>HEALTHCARE
</li>
<li>FACTORY
</li>
<li>FARM HOUSES
</li>
<li>PRIVATE RESIDENCES
</li>
<li>INTERIORS
</li>
</ul>
</li>
<li>chronological
</li>
</ul>
</li>
<li>services
</li>
<li>news
</li>
<li>Press
</li>
<li>D [+] DR
</li>
<li>Careers
</li>
<li>Contact Us
</li>
</ul>
</div>
You can simply do that using CSS, so try this:
li:hover > a {
/* Selects all <a> elements that are placed immediately after <li> which is hovered */
color: #FFF; /* or any code you want */
}
So if the mouse is over the li itself it will be highlighted, also if it's over ul or li inside the first li it will be also highlighted
Hope this will help you ..
<ul id="menu">
<li>About Assetline
<li>Products & Services
<div id="mega">
<ul>
<li>Commercial Credit</li>
</ul>
<ul>
<li>Portfolio Management</li>
</ul>
</div><!--mega-->
</li>
<li>News & Events
</ul>
This is the menu structure what I want to integrate into WordPress . But there's an issue to add a div id ( ) inside of a menu . Any idea to achieve this ?
You forgot to close some of your first li tags. If that does work, remove the div, and assign the id in the child ul.
<ul>
<li>
<a>level 1</a>
<ul id="mega">
<li>
<a>level 2 A</a>
</li>
<li>
<a>level 2 B</a>
<ul>
<li>
<a>level 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to open one of the submenus of a superfish menu with an event. For example with a button and "onclick". And i want it to stay opened until you press a Close button
How could i do that? Can i call a "hover event" function from the superfish.js somehow?
<ul class="sf-menu">
<li class="current" id="qwqw">
ThisToHover(forexample)
<ul >
<li>
Ismertető
</li>
<li class="current">
Cégtörténet
</li>
<li>
Telephely
</li>
<li>
ISO
</li>
<li>
Referecciák
</li>
</ul>
</li>
<li>
menu
<ul>
<li>Teherfuvarozás</li>
<li>Gépszállítás</li>
<li>Gépbérlet
<ul>
<li>Subsubmenu</li>
<li>Nyan Cat</li>
</ul>
</li>
<li>Gépi Földmunka</li>
<li>Bontás</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
menu
</li>
<li>
menu
</li>
</ul>
it was so much easier than I thought.
Simply had to add class 'sfHover'
document.getElementById('qwqw').className='sfHover';
...for example.