When the screen width < 768px, I can't figure out why my navbar doesn't scroll although I have set it to .navbar-static-top, it still looks like .navbar-fixed-top.
See my Plunker, the code is in file dashborad.html line 21
<nav class="nav navbar navbar-static-top navbar-inverse col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 ">
http://plnkr.co/edit/Vlx47gPERIJ8ELGEOWZm?p=preview
And there is mycss.css and main.css file, I don't know which part of my script cause that probelm.
I'm quite sure it has something to do with that dashboard-page class, the navbar is trapped inside that div which is always 100% of the screen, so it gives the illusion that the navbar is always fixed on top.
What's the purpose of this class? Is it really necessary?
Remove both .dashboard-page .main in line 6997 in main.css and .dashboard-page class, plan your page differently, the main element doesn't have to be positioned absolute, unless it's a popup or some kind of a div on top of everything. Remove these classes, re-structure your html and you'll be good to go!
Related
On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
This will be an easy question for most of you no doubt. I am trying to make a web page for my friend using this theme:
http://www.templatemo.com/live/templatemo_452_stone
I'm trying to move the header "STONE" more to the left, any ideas on how to do this?.. Also if possible I'd like the front-page image to be slightly higher up than it is.
Thanks in advance, I've got a headache from all the messing with it!
Looks like your .container class has a set width of 1177px. If you only want the header to move and not the links as well, then you'll have to add some negative margin.
.navbar-header {
margin-left: -50px;
}
Change your class container to container-fluid as below.
<div class="site-header">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
The final output would be as below.
The difference between container and container-fluid as stated in the answer here is
.container-fluid continuously resizes as you change the width of your
window/browser by any amount, leaving no extra empty space on the
sides ever, unlike how .container does. (Hence the naming: "fluid" as
opposed to "digital", "discrete", "chunked", or "quantized").
You have to set this css rule to achive it:
div.row {
margin-left: -100px !important;
}
But as I don't know about your html/css structure it may have side effects...
You can also search in the html for the line:
<div class="row">
and put the style inlined:
<div class="row" style="margin-left: -100px">
Of course change -100px for the number of pixels you want. In the original css it's set to -15px;
I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...
<div class="bodyWrapper">
<!-- top navbar - doesn't change size-->
<div class="navbar navbar-fixed-top navbar-inverse nav-top">
...
</div>
<!-- bottom navbar - collapses and changes size-->
<nav class="navbar navbar-inverse navbar-static-top" >
...
</nav>
<!-- 2 dropdown menus, always centered, and underneath the navbars-->
<div style="width: 100%;">
<div style="position: relative; left: 50%; top: -20px;">
<nav id="menu" class="menu">
</nav>
<nav id="menu2" class="menu">
</nav>
</div>
</div>
</div>
With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...
.bodyWrapper {
position : relative;
overflow : hidden;
}
(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).
But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.
The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.
Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!
EDIT
example as requested:
http://codepen.io/d3wannabe/pen/gaVXzO
(the last line of the css can be commented in/out to see what happens to the dropdown)
You can set display of dropdown class to inline-block and its parent to have text-align to center.
.dropdown{
display:inline-block;
}
Check out here : http://codepen.io/anon/pen/aveEoP
I have an issue with the Bootstrap navbar for the carousel theme. The problem is when I go into mobile mode (basically sizing down the window), the navbar has white space on the sides, something that I don't want to happen. Is this probably because it depends on the Carousel div?
With the Carousel thing, the navbar won't have white space.
There is white space on the other pages on the sides when there is no carousel.
Is there any way to fix this? I tried removing the container styling, but that just ruins the whole page.
Going out a limb here, and guessing you haven't wrapped the navbar in a 'row' div. The row div has negative margins which counteract the padding on the container div.
<div class ='container'>
<div class ='row'>
<div class ='nav_bar'></div>
</div>
</div>
I have been using bootstrap's navbar css. Below this navbar I have a which I want to put below the navbar. However, why does it always start at the top and not below the navbar? I've looked at twitter bootstrap's example and they were able to have a positioned below the fixed navbar. Here's the link to my website. Any idea why this is?
Here's the html that I have now:
<div class="navbar navbar-fixed-top">
</div>
<section id="main">
</section>
The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use
our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
ref: http://getbootstrap.com/components/#navbar-fixed-top
I dont know why they dont put this note in bootstrap 2.3.2 but this is what you want. :)
Yesterday I fix my navbar and set the container as following
.maincontainer{ padding-top: 75px; }
75 pixel is enough and doesn't affect Bootstrap on Responsive design in Tablet and Mobile. Work perfect everywhere :)