I've given my navbar a fixed position and a z-index of 1. It stays at the top when I scroll which is good, but then my logo doesn't go behind it as it scrolls up, it can still be seen in the nav area which I really don't want. Below is the css for my Logo. I'm still learning web design. Thanks.
#logo {
background-color: #292421;
color: white;
margin-top: 70px;
padding: 40px 0 25px;
}
#nav_bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background: url(..images/header-fade.gif) repeat-x;
border-bottom: 1px solid #ccc;
}
Your #nav_bar has no background. The URL you provided is incorrect. You probably wanted it to be
background: url(../images/header-fade.gif) repeat-x;
Notice that you missed slash character / after the dots ..
Related
Code of navigation bar
ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
list-style-type: none;
background: black;
margin: 0;
padding: 0;
}
li {
float: left;
padding: 25px 25px;
cursor: pointer;
}
a {
text-decoration: none;
color: white;
font-size: large;
}
and code of image
.image {
position: relative;
left: 500px;
overflow: hidden;
So when I scroll text smoothly hides behind navigation bar. but the enter image description hereimage overlaps the navigation bar
right now on my right the div of 'similar questions' is also overlapping the bottom black div
You should set a z-index to your ul and make sure it is higher than what the other elements have.
You will need to add a z-index to the main navigation higher than the content scrolling. As mentioned.
But also you using position: relativeon the image, if you also set its parents position to relative as well thi sway the image will stay within the main contents wrapper, and scroll beneath the menu with the rest of the content.
I have been toying with the different templates at Weebly and trying to find one fixed nav bar that I can add social links at the top to, but I can't seem to work with any. The social links tend to be out of place.
I have decided to use a current template, but need to fix the current header portion. I have tried adding position: fixed to a few areas of the CSS, but it turned out horrendous. The background can be seen along with the scrolling.
apply this to #header-wrap
position: fixed;
top: 0;
z-index: 1;
background: #FFF; //if you want a background on the fixed header.
You now have the border on the #page-wrap so if you want to keep that give this div a margin-top.
If you want the border on the fixed header, put it there.
Styling for you nav:
#nav-wrap {
position: fixed;
top: 47px;
z-index: 2;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
padding-bottom: 10px;
margin-bottom: 10px;
background: url(theme/saperator.png?1418308200) no-repeat bottom left;
z-index: 2;
background: #FFF;
}
http://jsfiddle.net/ft44wLym/
my client has added an image to their WordPress header. I am having difficulty (I'm still learning CSS) getting the image to align where we want it.
This is the site here
You can see the Options House graphic on the right. I want it to be to the right of the word "stocks" in the tagline. Help?
====Edits based upon suggestions below====
#Beardminator made a suggested answer, but this is what the site header looked like after including that code:
Relatively position that options_house div like so:
#options_house {
float: right;
position: relative;
top: 40px;
left: 52px;
}
And take off the overflow hidden from the header class.
Here is the 2 div which you should replace with this code:
.slogan {
color: #EBEBEB;
font-size: 17px;
left: 200px;
line-height: 25px;
position: absolute;
text-shadow: 0 2px 4px #0F243E;
top: 59px;
}
.logo_mmj, .logo_mmj:visited, .logo_mmj:hover, .logo_mmj:visited:hover {
background: url("../images/logo_marijuana.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 95px;
position: absolute;
right: 0;
text-decoration: none;
top: 23px;
width: 392px;
}
You need to put the logo to the right, so the .logo_mmj should contain
right:0px;
Or if you use position:relative;
You can use like this:
.logo_mmj
{
position:relative;
float:right;
}
update:
The site you linked have very different logo that's why It only made it worse. You only need to adjust
.slogan left property. And add
to .logo_mmj div top:30px or much more.
I have an odd redline next to my logo, and I can't for the life of me work out why.
Take a look:
http://www.pdf-explode.com.au/index.php
Here's the red line I'm talking about:
http://www.bounceapp.com/66618
I've tried looking at all the borders, there's no red.
searched through backgrounds, no red.
inspector can't inspect it.
it's not in the image
Let me know if you can find it.
The background is repeated (the red line is a part of the letter D), so add: no-repeat to your css
It's the repeat of the background image on #menu a.logo (so it is the D of Document showing up again to the right). Remove the repeat.
your css:
#menu a.logo {
background: url("../images/logo1.png") repeat scroll 0 0 transparent;
height: 45px;
left: 0;
position: absolute;
text-indent: -10000px !important;
top: 5px;
width: 265px;
z-index: 10;
}
the correct css:
#menu a.logo {
background: url("../images/logo1.png") no-repeat scroll 0 0 transparent; //edited
height: 45px;
left: 0;
position: absolute;
text-indent: -10000px !important;
top: 5px;
width: 263px; //edited
z-index: 10;
}
your logo's width is 263px;
This is because your logo starts repeating itself. The line is coming from the red "D". add background-repeat: no-repeat; or shorten the logo width for about 2 pixels.
How can I get the menu bar like on this page http://eddieringle.com/ at the top of the page. A menu bar that would move along when I scroll down the page. The black bar.
Its not moving, it just a div fixed into place. From the site in question.
#topbar {
left: 0;
position: fixed;
float: left;
width: 100%;
background: url(../images/topbar-bg.png) repeat-x 50% 100%;
z-index: 900;
padding: 5px 0 19px;
}