Gap above navigation bar? - html

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.

Related

How to place icon in navigation bar

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

HTML UL LI a href links not working

I am working on a website and for the menu I have the following code:
<header>
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<nav id="menu">
<ul id="menu-nav">
<li>Home
</li>
<li>Clubs
</li>
<li>Campaigns
</li>
<li>Movement
</li>
<li>Events
</li>
<li>The Talk
</li>
<li>Resources
</li>
<li>Donate
</li>
<li>#Aevidum
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>
But when I click on the home link it doesn't go anywhere or do anything. Anyone know what the issue could be?
Here is a link to the directory I'm working on it in: http://aevidum.com/brushed/
I think some java-script or jquery function is overriding your current functionality, because the code which you posted works fine without any includes.
<header>
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<nav id="menu">
<ul id="menu-nav">
<li>Home
</li>
<li>Clubs
</li>
<li>Campaigns
</li>
<li>Movement
</li>
<li>Events
</li>
<li>The Talk
</li>
<li>Resources
</li>
<li>Donate
</li>
<li>#Aevidum
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>
I guess you may be using the Brushed Template by Alessio Atzeni?
I had the same problem. Below is the full nav section I have, and where I added a class 'linkfix_LogIn' to the link I needed to be not a relative anchor.
<header>
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a id="goUp" href="#home-slider" title="Home">Home</a>
</div>
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>What Is This</li>
<li>Contact</li>
<li class="linkfix_LogIn">Outside Link</li>
</ul>
</nav>
</div>
</header>
Also in the main.js file, amend the following inside this function:
BRUSHED.listenerMenu = function(){
And add this little method at the bottom:
// Fix outside links.
$('.linkfix_LogIn a').on('click',function() {
window.location.href = "http://www.YourURL.com"; // Change This
});
If you use "Brushed Template by Alessio Atzeni", It seems to be caused by "plugin.js".
Get "jquery.nav.js" from the following page.
https://github.com/davist11/jQuery-One-Page-Nav
Then overwrite the code of "jQuery One Page Nav Plugin" in the last part of "plugin.js" (near the 30th line to the end) with the contents of "jquery.nav.js".
I was able to solve the same problem in this way.
I hope this helps someone.
Issue might be with the jquery come with your template. If nothing worked out use a javascript onclick function on the 'href' tag to redirect
onclick="window.open('https://www.yoursite.com/mypage')"
If you want to mention the target type use this instead
onclick="window.open('https://www.yoursite.com/mypage', '_blank')"
I had the same problem. I just added diplay: block on the a tag. It's worked for me!
ul li a {
display: block;
}
Proceed like this everything is gonna work perfectly .
<ul class="nav-links">
<li> Home</li>
<li> Tours</li>
<li> Explore </li>
<li>About</li>
</ul>

how to make a menu highlighted while pointing sub menu?

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 &AMP; 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 ..

Insert a div class inside wordpress menu

<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>

unordered list navigation html structure

I'm a novice and ran my code through an html validator.
Regarding my navigation I receive a message that reads: :Element ul not allowed as child of element ul in this context"
Here is the html structure:
<nav>
<div class="nav_container">
<ul class="navigation">
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
<ul class="subnav">
<li>home</li>
</ul>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
<ul class="subnav">
<li>shelving
</li><li>mantels</li>
</ul>
<ul class="subnav">
<li>news</li>
</ul>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</ul>
</div>
</nav>
Whats wrong with it? It looks fine across browsers. Should I be concerned or take action?
A ul can not be a direct child of another ul, it needs to be contained within an li
<ul class="navigation">
<li>
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
</li>
<li>
<ul class="subnav">
<li>home</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>shelving</li>
<li>mantels</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>news</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</li>
</ul>
you could also give the menu some headings by adding it in the li before the child ul,
you must wrap each of the inner ul with an li
<ul class="navigation">
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
</ul>
Your structure is likely wrong. Logo is not a list or list-item. As well as list item that contains just another list is generally pointless.
Use heading element for logo (I usually use H1 for home page and H3 with link inside it for other pages):
<!-- for home page -->
<h1 id="logo">Company</h1>
<!-- for other pages -->
<h3 id="logo">Company</h3>
And make sure that your navigation has correct hierarchy like this:
<ul>
<li>Products
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Tablets</li>
</ul>
</li>
<li>About
<ul>
<li>History</li>
<li>Contacts</li>
</ul>
</li>
</ul>
In the example, each LI has its own link and subsections of section that the link represents, and thus the link text is heading for subsections' list.
You need to wrap
<ul class="navigation">
<ul class="logo">
as
<ul class="navigation">
<li>
<ul class="logo">
...
</ul>
</li>
and so on...