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.
Related
In the "lightblue" background (max-width:800px), my social media links fall behind my images. I've tried position:static and the z-index without any luck.
Next, in the "lightblue" background (max-width:800px), I believe my containers are crashing into each other. I've tried, clear:both; overflow:hidden, and display:flex;
Lastly, I'm trying to make my hamburger, nav bar position vertically, when it is responsive. On desktop, I still want the nav bar to be horizontal.
I am at a loss, please help and thank you so much for helping me on my very first website. :)
Please follow me on Instagram at #glp_princess
The link will take you to my html and css.
https://jsfiddle.net/p4zayr0u/
body {
background:lightblue;
}
#wrapper {
margin:0px auto 0px auto;
}
header {
position:static;
height:0px; /*keep?*/
width:100%;
top:0;
background:none;
border-radius: 0px;
}
.header-inner {
margin-bottom:10px;
padding-top:1px;
}```
The reason that your socials become unclickable is that you changed the styling of your header tag at the media query (max-width: 800px). Your social anchors are children of this header tag, and so any changes you make to the header will also effect these anchors. If you want to have position: fixed buttons, I would recommend that you place them as direct children of the body so that they don't get effected by changes you make to other elements.
Current:
<body>
<header>
<div class="header-inner">
<h2 tabindex="1">UX DESIGNER X RACHEL SADATIAN</h2>
<ul id="social2">
<li target="_blank" tabindex="2"><i class="fab fa-linkedin"></i>
</li>
<li target="_blank" tabindex="3"><i class="fab fa-instagram"></i>
</li>
</ul>
</div> <!-----end header-inner----->
...
</header>
</body>
Recommended:
<body>
<ul id="social2">
<li target="_blank" tabindex="2"><i class="fab fa-linkedin"></i>
</li>
<li target="_blank" tabindex="3"><i class="fab fa-instagram"></i>
</li>
</ul>
<header>
...
</header>
</body>
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 am doing a drop down menu and i want the drop down items to all be in a line and probably drops to the next line on screen resolution. my html is
HTML
<li class="main"> Menu
<ul>
<li class="sub-menu"><a href="#">
<div class="content" style="width:300px;">
<img src="image.jpg"><p>text</p>
</div></a>
</li>
<li class="sub-menu"><a href="#">
<div class="content">
<img src="image.jpg"><p>text</p>
</div></a>
</li>
</ul>
</li>
CSS
.main {float:left; display:inline-block; width:auto}
.sub-menu{float:left; width:300px;}
.content{width:100%}
What I am targeting is when someone clicks the main menu "menu" it drops down to the sub menu "sub-menu" and all sub menus come in line until screen width changes and the last one automatically goes to a next line. Any help will be much appreciated people!!!
Thanks in advance.
Michelle
Your question is a little hard to understand, but from what I'm guessing, you want to click the main menu, and a sub menu drops down, displaying the contents (img with text).
This might be what you're looking for:
<style>
.main {background-color: red;}
.sub-menu {background-color: blue;}
.sub-menu a {display: inline-block; color: white;}
</style>
<div class="main">
Menu
</div>
<div class="sub-menu">
<img src="image.jpg"> text
<img src="image.jpg"> text
</div>
Where you can make the sub-menu hidden until you click the main menu. You might also want to add some padding to the links for spacing. Colors are there so you can see the layout.
<p> elements automatically drop a line in web display, making them display below the img tags.
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?
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.