I work for the website of a game I develop with my team, and I can't figure out out how to force my navbar to be fixed top.
Ideally, I would like to make the website in one page mode, but for the moment, this issue avoid to have an ergonomic navigation, because the navbar scroll with the content.
I want to make the content which is under the navbar to scroll Only
Bootstrap documentation says that you just need to put navbar-fixed-top to your syntax and to put the a div class="container" inside the <nav> tags, but it doesn't worked for me so far.
I think my custom template can be the cause, but I need help please :)
You can find the URL here : http://raphaelvareilles.fr/labs/prism/
Just had a quick look at your page and in your prism.css line: 171 I can read:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: none;
font-size: 37px;
}
You have to remove position: relative; here, it overrides the position:fixed; style of Bootstrap.
I did the following:
.navbar.navbar-fixed-top {
position: fixed;
}
Currently your prism.css ".navbar" is overriding the bootstrap position. The additional CSS above will avoid the issue.
Add the below CSS in your stylesheet
nav.navbar {
position: fixed;
}
header {
margin-top: 60px;
}
Related
I have been building a website using bootstraps scrollspy. So far so good, except that carousel buttons are appearing over my footer
Here is the footer css:
.footer {
position: fixed;
bottom: 0px;
padding-top: 15px;
width: 100%;
height: auto;
background-color: #222222;
}
Any way to fix this?
like #zack6849 said if you add the z-index property to the .footer css it should resolve your issue provided you spec a value higher than that of your slider. You should inspect the element and see what the current z-indexes are, or just use a real high value for your footer like z-index:10000;
you can read more about z-index here
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
I have a sticky navigation on the top of my page and i also have one as the right column.
My problem is that when i link the side navigation to an anchor it scrolls the page to that anchor and puts it behind the top navigation.
Is there anyway that i can have it so it scrolls the page to 100px above the actual anchor so it isn't behind the top sticky navigation?
I am using bootstrap with affix-top on the top navigation and data-spy="scroll" and alsoaffix` on the right column navigation
bold
Since i am using the data-spy="scroll" this affects the way that the scrollspy works since the anchor goes behind the top navigation before it changes the spy on the side navigation.
This is why i ant to have an offset on my anchor.
As long as you can set this up so that it won't interfere with the rest of your layout, the following is an easy manner to do what you want:
Sample Jsfiddle: http://jsfiddle.net/qWHgR/
selector {
padding-top: 200px;
margin-top: -200px;
}
I'm not personally familiar with Scrollspy so you may have to make some minor changes to it if the offset becomes a problem.
+1 to #Nit suggestion. I like that it works beautifully well on inline and block level elements, wouldn't have thought.
http://jsfiddle.net/gCs7C/
HTML:
<nav>
Scroll to content
</nav>
<div>Spacer</div>
<div>
Spacer<br />
<span id="hash">Content</span>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
}
div {
height: 1000px;
}
nav {
position: fixed;
height: 24px;
width: 100%;
background-color: yellow;
}
#hash {
padding-top: 24px;
margin-top: -24px;
}
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I created a form for a Wordpress site http://www.bassetandbeagle.org/adoptionapplication/ and in the CSS code I put div position: absolute, so that the form would scale on mobile devices.
#formContainer {
min-width: 950px;
max-width: 950px;
padding: 10px;
position: absolute;
z-index: -1; }
Now the drop-down menus, above the form, are hidden behind it.
I attempted to set a higher z-index for the menu:
.nav-menu{
position: relative;
z-index: 1; }
But this had no apparent effect. I tried 1, 100, 1000... nada
I was able to get the drop-downs to show up again, by changing the .nav-menu to position: absolute. Unfortunately, this screwed up the positioning of the menus on the page.
I am pretty sure I am on the right track with the z-index property, based upon the other posts I have read. So, what am I doing wrong here?
Thx
Here is the solution of your problem -
CSS:
style.css line: 1431
.site {
margin: 0 auto;
max-width: 68.5714rem;
/*overflow: hidden;*/ /* remove this css rule and you will see the dropdown menu*/
}
Note: Check you site that where your .site class is applying and make the changes in css as per need.
Screen Shot:
Remove position: absolute from #formContainer.