I have a Responsive Top Navigation bar modeled from w3schools. Below that, I have various pages.
In the div, I have to specify a margin-top. The problem is when I resize the screen width, the menu goes to (2) lines. I can not figure out how to move the page content down to keep the same spacing between the menu and the page.
This might be happening because the top nav bar is positioned absolute. The absolute will make the top bar in a new layer. So the content is not moving down when top bar is in two lines. You can try removing the position absolute if the top bar has that style.
Related
I'm trying to create a fixed navigation bar with buttons(aligned left) and a title(aligned right). Before i fixed the position to the top of the page, it works as intended (other than not moving when scrolling, obviously). However, when i fix the position of the header, it moves my title over to the left with the buttons. How can I fix this? I've tried to make it into a div inside of the header tag and position:absolute the div; didn't work.
Here is what my page looks like
Looking to create a fixed menu that starts in middle of webpage, but when scrolling down fixes to the top of the page using CSS/HTML.
Is it possible to do this using a container? So the container with the menu starts below a top container and when the top container is scrolled off the page the menu is fixed to the top of that container and the top of the screen?
For example, how can I make it so that the image in the second container stays at the top of the screen when scrolling down the page, but make it stay in the second container:
https://codepen.io/Daggett/pen/mpBaab
position: sticky;
<!--doesn't stick!-->
Is there a way to do this only with CSS? I know it can be done with jQuery
Thanks!
position: sticky needs an explicit vertical position like top:0 to know where to stick to.
On this page (Wordpress site), the pink element becomes sticky when it touches the menu. But this element is unclickable because of the logo on the left, which makes the menu wrapper higher, thus making the sticky element unclickable.
I can't use pointer-events:none on the menu div, because that makes the menu + logo unclickable.
Also, z-index is of no use as the sticky element is nested in the content wrapper. So if I'd make the z-index of the content higher than the menu, the content will scroll on top of the menu.
I should probably separate the sticky element from the content wrapper, but as I'm no expert with the Wordpress wireframes, I don't know how.
Or are there any other tricks I could try?
If you just set the class fusion-logo to position: absolute the logo container won't follow the normal flow of the element, so that fusion-header height will be the same of the navigation menu and the pink element will be right below to it, clickable
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've been working on my site: www.zdrctry.com.
I have a couple questions about the top navigation bar (containing Home, Contact Us, Cart, My Account):
How could I move the navigation bar down to the same level as the "Directory Theme" logo. It is similar to the Red Header of website: www.premiumpress.com.
I'd also like to know how to align the navigation links to the right side of the page.
How could I achieve this?
Put your navigation bar inside a div and make the div's width 100%. Now for the CSS for your nav bar element, put text-align: right.
To move the bar down, use absolute positioning and specify how far from the top of the page you want it.