On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I'm using bootstrap to create a webpage. The problem is that I have a horizontal navbar a main tag and a footer. When I resize the screen, the navbar main and footer do not align, the navbar is wider than the main content, and the footer is more inside. To partially fix this I modify the style of each element, but when the navbar adjusts itself, it becomes wider than other elements in the HTML. Is there a global way to make everything align?
Its because you didn't include the collapse class of bootstrap which help to resize the navigation bar when screen is resized.Better to use a button which on clicking shows other tags in your navigation bar which is by the way vertical for small screens.
Also please share your code so you can be helped better.
I have a vertical menu inside a header. The header takes the whole width and height of the screen/window. It is also fixed on top. However when the height of the menu is bigger than that of the screen it get cuts off and I cannot scroll to see the rest of it. This does not happen when the header is not fixed but I want it to remain that way.
Here is a photo of the menu normally
Normal menu
and here is a photo when cropped
Menu cropped
use overflow-y:scroll in css. if that is not working you should be use important .overflow-y:scroll!important . i hope it will be work .
I am attempting to hold my footer div at the bottom of the site to avoid blank space underneath it on shorter pages. When I set the position of the footer to be absolute, the responsive menu button seems to take its position relative to the footer and no longer to the header. When I change it back from absolute it works normally. It is almost as if it is associating itself with the footer menu rather than the header menu, but I can see no good reason why this would happen. Also, when I am logged in to WordPress, the top menu bar (on the front end) gets pushed down in just the same way. However, this doesn't happen until the viewport hits 600px (I have no media queries at 600px). The responsive menu already appears at a viewport width of 767px.
This is a WordPress website in progress here.
I am using a custom theme and this responsive menu
Does anyone have any idea what might be going on there? Thanks.
You would need to move the #click-menu div & the #responsive-menu div outside of the footer element in order to fix this.
Here's a similar issue w/ some great answers: Absolute positioning inside absolute position
I am using twitter bootstrap navbar and list items are shown out of navbar when I minimise my browser to some small size and scroll to the end list item.
This is what looks as below.
Navbar when browser is maximised:
Navbar when browser is minimised:
I would like to have the items stick fixed to the navbar even though the browser is minimised.
Define min-width to your Navbar. For example write like this:
.Navbar{
min-width:1000px;
}
http://davidwalsh.name/demo/css-fixed-position.php
something like this? (the yellow box saying "Wherever you go, I will find you!")
if yes, then change position to fixed for NAVIGATION.
position:fixed;
(css)