I did some searches on the matter but seem to receiving mixed answers and I'm not entirely sure how to go about this given my limited coding knowledge.
I downloaded a website template called Brushed by Alessio Atzeni (mentioned for easier reference). The template is fantastic but unfortunately it does not come with dropdown functionality so I looked up a couple of tutorials and have managed to create my own.
<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="rando"></a>
</div>
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>Intro</li>
<li class="dropdown">Our Services
<ul id="menu-nav-dropdown">
<li>Social Media</li>
<li>Graphic Design</li>
<li>Development</li>
</ul>
</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
This is the HTML for index.html for the navbar, when I hover over "services" the dropdown appears and each individual element highlights as a result of me hovering but when I click it nothing happens. However, if I right click and "open in new tab" that proper page is generated.
I chose not to include the CSS to prevent cluttering the post, but if you need any other information I'll gladly provide it as soon as possible. Does anyone know what the issue might be? Thank you in advance.
EDIT: here is the http://jsfiddle.net/tuvon83p/1/ it doesn't look good at all but I believe the functionality is there and working properly (you just need to hover over to the right to see the links because there isn't a background).
Try
nav ul li ul li a{
position: relative;
top:0;
left: 0;
z-index: 999;
display: block;
}
basically: In the navigation, locate all ul, locate all li, locate all ul, locate all li, and select the a and it should go to the unclickable and put it above all things. There may be something above it?
Related
I am trying to have an anchor inside a list item to be changing colors when the mouse is hovering over. It is not working properly for PORTFOLIO and CONTACT (when I hover over ABOUT, CONTACT changes color) but it not working at all for HOME and ABOUT (HOME and ABOUT do not change color at all). Why might that be?
Here is my CSS code:
li a:hover{color: #E3872D;}
And here my HTML code:
<div class="leftpart_wrap">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="leftpart_bottom">
<ul id="icons">
<!--Icons go here and their hovering attribute works perfectly-->
</ul>
</div>
</div>
It could be a few things. Your code is correct but probably has some overwriting style in your CSS. Try using more specific CSS to see if it resolves:
.navbar li a:hover{color: #E3872D;}
I'm working on a project(using bootstrap) and I can't seem to figure out why my nav is still stacked up instead of being laid out horizontally. I've tried just about everything I can think of and even sought help online where I'm learning to code but they couldn't figure it out either. They told me it should be working and in fact it does work in their code editor, it just doesn't work on my computer which is where the files are located since I don't have web hosting and I'm just learning. I also noticed that in my browser the nav pull-right works and the links are on the right hand side(although they're still not horizontal) but when I ran it through here where it says "run code snippet" the nav appears right underneath the img placeholder, don't know if that means anything but I thought I'd include that bit of information.
header nav ul{
display: inline-block;
}
<header>
<div class="container">
<div class="row">
<img id="logo" src="http://placehold.it/150x150">
<nav>
<ul class="nav pull-right">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
enter image description here
Do you mean you want to make the navigation to align horizontally?
Then you can try using this
header nav ul li {
display: inline-block;
}
working example here.
The reason your method doesn't work is because you apply to ul instead of the li element.
I'm trying to make my website with Wordpress.
I wanted to add my custom horizontal menu, with plain CSS and HTML since plugins can't satisfy me.
This is my HTML code:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
and this is my CSS:
#provamenutop {background-color:#333; width:90%; line-height:100%;}
#provamenutop li {position: relative; float:left; list-style: none; font-family:verdana;}
#provamenutop li a {display:inline-block; text-decoration:none; padding: 20px; color: white; background: #333; transition:.4s;}
#provamenutop li a:hover {background: #111;}
On my local computer, this looks right:
https://gyazo.com/d5b38f6cc1c7857dbe37945e2d8b5002
But here's what it looks like on my website, using a custom theme called Sportexx:
https://gyazo.com/5ccb7e944b627244a7d3ac8344471b28
I know this could be some CSS already existing in the theme interfering with mine, but what could I do to avoid the problem? (The space in between one Home button and the other is also clickable)
Thank you for reading.
When you use Chrome Developer Tools or Firefox Firebug and inspect the HTML, you will see the following output for your menu on the web site http://www.ferrari.co.it/athletic/
<div id="provamenutop">
<ul>
<li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a></ul><a href="#">
</a>
</div>
So the problem here is not CSS, but faulty HTML. You have two additional <a href...></a> tags. One before the Home and one outside the closing </li> tag and also one outside the closing </ul> tag.
If you fix your HTML, so that it looks like this, it will actually work:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
It's definitely a CSS conflicting issue. Do you have a link so we can check it in firebug? Should be a very easy fix. When I run your html and css in JSFiddle it works fine.
I'm not sure what you mean by On my local computer, this looks right:
But here's what it looks like on my website, using a custom theme
called Sportexx:
Are you not using sportexx on your local computer? If it's working without the theme and not working with the theme it's the CSS. Just open up firebug in your browser and look at the css around the menu. You should be able to adjust it right there and remove the problem. Then go to your stylesheet and make the changes accordingly.
After seeing your comment. It's the html. Just delete the other links.
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
I have being trying to find a solution with a menu i have on a custom html website that it is not appearing but i can't for some reason find a solution and i'm quite curious what i'm doing wrong.
<div class="header_area fix" id="header">
<div class="header_top fix">
<div class="left_logo floatleft fix">
<img src="img/logo.png" alt="Burning Desire Stoves Fireplace and Fire Centre" />
</div>
<div class="main_menu floatright fix">
<button style="floatright" id="mobile_button">Menu</button>
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">Stoves
<ul>
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul>
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
</div>
</div>
You can check the website here
The site is a for a client of mine he said he added some extra menu option without touching the css and then the menu broke. More importanly the dropdown of the menu is not appearing and i was trying to make come the surface with some display:block or z-index with no luck.
Also he has add a PHP CMS called Couch which is adding tag.
To give you a better idea the following code as actually a snippet and it is located in a most likely cms path "editor/snippets/header"
.main-menu>ul>li>ul {
position:absolute;
}
Your Menu Has a Dropwown but it is not hidden , so it takes some space. and the header has oveflow hidden, so the menu is becoming hidden entirely.
Add this css and your menu will be shown,
but you need to add code for dropdown to work.
This CSS is all kinds of jacked up.
The issues:
overflow: hidden on the .fixed element is causing the text to disappear.
As far as I can tell, there's no CSS that displays the drop down lists on hover
The drop down lists aren't hidden, so they're taking up space forcing the main list out of the nav bar
There's still list-style-type:disc for the li elements
I'll fiddle with it for a minute, but those are the issues.
Update I fiddled with the CSS and got the dropdowns to display. You'll have to make them look pretty with some CSS, but they're working. Yeah, it's kind of hacky, but I did what I could with the 5? CSS sheets all competing for screen time.
/* menu extra css */
.dropdown:hover .dropdown-hidden {
display:block;
}
.dropdown-hidden {
float: none!important;
display: none;
position: absolute;
z-index: 99999999;
left: 0px;
background: #fff;
}
.dropdown-hidden li {
display: block;
float: none!important;
position: relative;
}
.fix {
overflow: inherit!important;
}
li {
list-style-type: none;
}
-
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">
Stoves
<ul class="dropdown-hidden">
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul class="dropdown-hidden">
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>