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;}
Related
I am almost done, with the navbar, I just want to add 1 font icon, that will open "my account" page.
i tried this:
the navbar looks good, just font is missing.
<header>
<nav id="navbar">
<div class="container">
<h1 class="logo">censord</h1>
<div class="my_account >
<i class="fas fa-user-cog"></i>
</div>
<ul>
<li>Categories</li>
<li>Post</li>
<li>Search</li>
<li>About</li>
<li>My account</li>
</ul>
</div>
</nav>
</header>
Two points here:
You have a missing quotation mark on this line, messing up the HTML: <div class="my_account >
Make sure that the CSS property font-family: FontAwesome is applied on your <i> element.
Edit: You can also try to manually set the contents of the i element by adding this to your CSS:
i.fa-user-cog {
content: '\f4fe';
}
It seems that jsfiddle does not let me use multiple html pages so i cannot post both pages. The issue is when i click a link my nav, i notice the logo move a little to the right instead of staying in the same place. the second html page has the exact same html code and css so i don't know why the logo would move once i click a link.
<header>
<div class="header">
<h1 class="logo">New York</h1>
<nav class="main-navigation">
<ul>
<li class="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
I am newbie and I've got a trouble. I have element with four elements and I can't put one on the right side.
My code is here:
<body>
<header>
<div id="topmenu" class="navigation">
<ul class="navul">
<li>FAQ</li>
<li>ABOUT</li>
<li>Next</li>
<li class="rightbutton"><div>Log In/Sign Up</div></li>
</ul>
</div>
</header>
And css is on jfiddle ( I was not able to attach it correctly)
http://jsfiddle.net/EGxWy/2/
Try putting float:right on one li element and display:inline-block on all li elements.
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?
I have a simple html menu that is styled using CSS.
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
What I am looking for is a way to show the user what page is currently in use by way of a coloured background on the correct bit of the navigation menu. E.g. when the user is on the career page, the li box would be a different colour to the rest of the menu to show that it is in use.
What you're going to want to do is add a class to whatever menu item is currently active. For example, the HTML markup for index.html would look like this:
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
And the markup for career.html would look like this:
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li class="active">Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then style the class accordingly:
.active {
background-color: red;
}
You can do this by adding an'active' class.
When you are on a certain page, you will add the class="active" to your link ( or li element ) . This is how wordpress and many other web application solve this.
Look here : http://jsfiddle.net/Bm9E4/2/
On the active page, add a class of .active to the LI for that page.
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then do CSS for the background:
#main li.active { background-color:red; }