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?
Related
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>
I have put an image on the top of my page, but I also want to insert a navigation bar on the top of the page (in front of the image). But the reality the navigation bar is above the image, I cant put them both on the same row, I can do it with make the navibar fixed top, but its really annoying when I scroll down. Is there any way to solve my problem?
(PS: Image is not a background!)
<nav class="navbar " role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
</ul>
</div>
</div>
</nav>
<img src=" ">
This should work:
.navbar {
position: absolute;
top: 0;
left: 0;
}
See: https://jsfiddle.net/tcybj6sj/
You basically had the right idea: Pin the nav bar to the top of the page. But instead of using position: fixed, which pins the nav bar to a fixed position within the browser window, use position: absolute, which pins the nav bar to a fixed position within the page.
What I want to achieve here, is to transparent navigation bar hide anything underneath and leave background only. So if you scroll down the page anything that goes under fixed navbar will be hidden. I've googled it but didn't found any satisfying results. Is it even possible?
Here's the demo site: http://klaunfizia.pl/damian/
Style: http://klaunfizia.pl/damian/style.css
what I got now: http://i.imgur.com/6k2yNJbh.jpg
What I want to achieve: http://i.imgur.com/VICvrUDh.jpg
Background image isn't solid, so setting navigation bar color to #ff7400 won't be a solution.
code:
<ul id="menu">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About me
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</nav>
<section id="container">
<section id="main">
<h1>hi! My name is Damian</h1>
<p class="mainText">
I'm a graphic designer from Poland specializing in web design, 3D modeling, vector graphics and digital drawing. See my portfolio for more information.
</p>
</section>
</section>
css:
#navbar
{
height: 80px;
width: 100%;
position: fixed;
-webkit-transform: translateZ(0);
z-index: 10;
top:0;
}
Why can't you set the same background color and image as the body?
#navbar {
background: url(images/background.jpg) #ff7400;
}
Works just dandy in Chrome dev tools.
Assuming that your header/menu container has a solid background color, this looks like a simple z-index issue. Give your menu a higher z-index.
If you could provide more code or a jsfiddle, I could tell you exactly which line of css to add/remove/fix. Unfortunately your site isn't loading.
I got a problem with my footer background. It seems like the height of the #pagefooter is 0 and the background color is only applied to the padding, vertical which 2x 25px.
I tried several things, but i didn't find a solution.
What's wrong here?
///THE HTML
<div id="pagefooter">
<footer>
<nav id="f1" class="footernav">
<h1>Misc</h1>
</br>
<ul>
<li>
Lorem
</li>
<li>
ipsum
<li>
<li>
dolor
</li>
<li>
sit
</li>
<li>
amet
</li>
</ul>
</nav>
<nav id="f2" class="footernav">
<!-- SOME MENU -->
</nav>
<nav id="f3" class="footernav">
<!-- SOME MENU -->
</nav>
<nav id="f4" class="footernav">
<!-- SOME MENU -->
</nav>
</footer>
</div>
///THE CSS
#pagefooter {
background-color: #1a1a1a;
padding:25px 100px;
}
.footernav {
float:left;
width:25%;
margin-bottom: 35px;
}
Here's an example: http://jsfiddle.net/AR3AC/
Basically, #pagefooter contains only floated elements which make the parent element have no height (and therefore no background colour). To work around this, set the overflow property to auto:
#pagefooter {
background-color: #1a1a1a;
padding: 25px 100px;
overflow: auto;
}
The height of the pagefooter is never set as far as I can tell. Add a line into #pagefooter so like this to explicitly state the height you want:
#pagefooter {
background-color: #aaa;
height: 100px;
padding:25px 100px;
}
I'm not sure if that answers your question, but that's a good place to start.
Now and then I'll get an issue with overflow:auto. In case you do, another way to deal with this is to put an empty clearing div right before . It can just be <div style="clear:both"></div>. (I generally make a class ".clear" which has clear:both. Makes it easy to troubleshoot this sort of thing by just testing with a <div class="clear"></div> to see if floats are the issue.
I want to make my menu and image appear on the same line but sadly that doesn't seem to be happening. Could anyone tell me why and how I would solve my problem? I've got the following image and menu...
HTML
<div id="header">
<img alt="" height="67" src="Aidanlogo.png" width="400" />
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
<br style="clear: left" />
</div>
</div>
Menu CSS: http://pastebin.com/drMD7gwg
Header CSS
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
try this
#menu ul li { display: inline; }
Divs are block elements, so by default it will always appear on a separate line.
You could make the image a block and float it left (display:block; float:left;)
You could make your div display:inline-block, or float:right; it, assuming there's room in the parent (700px).
DIV is a block element, so it won't display on the same line as anything else unless you change it's inline property:
#myslidemenu { display:inline; }
Also note that you'll have to modify the <ul> styles to display the <li> tags on a single line. See this link for more on that part.
edit I'm not sure what the jQuery slide menu does to the <div> or <ul> styles - you might have a look in Firebug after it's rendered.