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';
}
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;}
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 using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
Fiddle: http://jsfiddle.net/1htet5h1/1/
HTML:
<nav>
<div id="colors"></div>
<ul class="navUL">
<li><span>NY</span></li>
<li><span>CT</span></li>
</ul>
</nav>
When I hover the text link, the background and text color changes but when I hover over the list, the background changes but not the text color.
How can I resolve the issue.
#SearchForKnowledge Remove The <span> tag so that your html code becomes
<nav>
<div id="colors"></div>
<ul class="navUL">
<li>NY</li>
<li>CT</li>
</ul>
</nav>
EDIT:
updated Fiddle http://jsfiddle.net/1htet5h1/3/
In CSS
a:hover {
color: #(colorCode);
}
s
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.