Poorly worded question I think, however, I'm working on some coursework just now, it's a very basic HTML website. I'm trying to overlay the logo and the navigation on my Hero image. The issue I'm facing is trying to get the white bg from the header div to be transparent or remove it completely and have the nav and logo at the top of the hero image.
Hope Below CSS might help you.
Add this CSS in your CSS file.
I have used absolute position to overlay the navbar. you can read more in detail about the positions in CSS - https://www.w3schools.com/cssref/pr_class_position.asp
header {
position: absolute;
}
The easiest way to do it is just move header section to hero section like that:
<div class="hero">
<a href="">
<h1 class="logo"><strong>FOTO.</strong></h1>
</a>
<header>
<nav>
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<span class="herotext">THE WILD THROUGH A LENSE</span>
</div>
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 trying to set my company logo on my header navigation bar with no luck. I tried by adding before the nav itself but it's not centering the content. The image is shown first and the messy menu after that.
<header>
<img src="http://i.imgur.com/jNwTPBi.png">
<nav id="nav" class="ry">
<ul id="main-menu">
<li>
</i>Home
</li>
<li>
</i>About
</li>
<li>
</i>Our work
</li>
<li>
</i>Work
</li>
<li>
</i>Contact
</li>
</ul>
</nav>
</header>
You can try it right here, by adding <img src="http://i.imgur.com/jNwTPBi.png">: http://codepen.io/anon/pen/XKKPGO
How can I put the logo on the left so I can get something like the following solution? I guess I've to make some changes on the .css but I dont know what do I have to edit.
Thanks in advance.
Your CSS is over whelming. All you would need to do is give/create the wrapper a position of relative and the logo the position absolute.
<header>
<div class="wrapper"> ..
<img src="http://i.imgur.com/jNwTPBi.png" class="logo"> ..
header .wrapper {
width: 1100px;
margin: 0 auto;
position: relative;
}
header .wrapper .logo {
position: absolute;
left: 0;
}
i think it's super easy, so i think it might answer ur question
<header>
<div class="with_class">
<img src="">
</div>
<nav></nav>
</header>
put a wrapper div on your image and put an absolute position with it.
width whatever div width u want and height same as ur header. have you ever tried it before?
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>
I have a navigation that worked fine when i didn't use any custom bottom border on the nav links, but trying to adding them and still have the functionality as before does my head in. I just want to vertical align the nav items with 50px height and a custom border on the menu links, but keep it functional when in mobile size and de border in mobile view is replaced with a normal underline declaration.
This what i had before adding a custom bottom border and it works:
--> Fiddle before
And this is what happens when adding a custom bottom border when in mobile size the menu items don't vertical align and the background doesn't go down with them:
--> Fiddle after
<header>
<nav>
<div class="mobile-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>