I've been trying to fix a navbar position but it is not working correctly. I added margin-top to the nav element but this will create big white space when the user scrolling down. I just want to move the navbar position to the bottom of the header and above content. How can I make this work?
I draw the arrow where I want to move the navbar position.
https://songs-of-hope.tumblr.com/
You can just remove the below style from styles.css line number 500:
#header.bgimage.center .primary {
padding-bottom: 30px;
}
Or you can set padding-bottom: 0px;. This will solve you problem.
Related
So I've got this problem that my jumbotron goes under the navbar and I want to put it just below with some padding between them.
Here is my code: https://codepaste.net/ditsxf
This is how it looks like
Try adding this to your .css file:
body {
padding-top: 50px;
}
Or whatever the height of the nav bar is.
The classes from a bootstrap added a position: fixed; to your navbar. It means, that your navbar is always visible at the top of your screen all the time, even when you are scrolling down.
There are 2 ways to fix this:
Remove .navbar-fixed-top class from your nav component, but then you won't see your navbar at the top when you scroll down.
Add some margin-top to your container element.
I am having an issue getting my fixed position navigation menu to overlap my text, a example of this is: http://www.saveur.com/michel-roux-scrambled-eggs-with-asparagus-and-crab-recipe
With the code I have currently managed the fixed position navigation appears behind the text, but I want it to be at the top and overlapping at all times, just like the website above.
All of the content is fixed position, I have made this so that if any one could help me they could just edit the code easier.
HTML: http://pastebin.com/j7jHjb4h
CSS: http://pastebin.com/sWuLChut
How can I make it so that the navigation menu stays at the top even when scrolling down just like the website above.
Just add a z-index value to the fixed element:
z-index:100;
If larger than any other z-index on the same level, it will overlap everything as needed.
#navMenu {
margin:0;
width:200px;
height: 1px;
z-index: 1000;
}
You could try to give it a high z-index
I'm having a problem with my affix + container padding value causing some elements directly below it to move when I click on them.
My css code:
.affix {
top: 0;
width: 100%;
z-index:99;
}
.affix + #container-fluid-main {
padding-top: 70px;
}
I have a slideshow under my navigation bar where my navigation bar is fixed at the top (mobile screens). Now when I click on the slideshow to change an image the entire slideshow shifts down and there's a whitespace between the navigation bar and the slideshow.
I traced my problem to be that the slideshow has no margin-top so the padding-top value from the affix + #container-fluid-main causes the slideshow to shift. How can i overcome this without adding a top margin to the slideshow and keeping the smooth transition of the navigation bar? Thanks
Before Image
Before
And After I click on the image directly under the navigation bar
after
I have a JS image slider that I want to go under the fixed menu on scroll, But the slider has to use CSS position:Relative to work. (I can make it go under the nav bar with different position types but then the image slider doesn't work as it should)
How can I keep the slider working but make it go underneath my fixed menu bar?
Here is the page before scroll:
http://i.imgur.com/JdYL7gx.jpg
Here is the page when the image slider is in front of the nav bar: (I don't want it to be)
http://i.imgur.com/Mt8bLGk.png
here is how the content should be behind the menu:
http://i.imgur.com/6MzVy63.png
Set the z-index of your slider to a negative number to move it behind the header.
example
#slider {
z-index: -9999;
}
Or, set the header to a higher z-index to move it above everything else.
example
#header {
z-index: 9999;
}
If that doesn't work, share the code so we can help figure it out.
I have a slider that for some reason is half obeying margin 0?
Also, is there anyway I can make the top bar background not have such a large white border around it? I'm trying to make it start right underneath the browser url bar but it seems to leave a fairly large gap?
http://ispiked.net/tests
Add position: relative to the div with class="oneByOne1". That should fix the slider.
As for the top bar, add margin: 0; to both the body element and the p element inside .topbar - afterwards you might want to add something like padding-top: 15px to that same p element.
Also, is there anyway I can make the top bar background not have such
a large white border around it?
tried CSS like
html, body { margin: 0px; padding: 0px; }
to reset the layout at the beginning?