Not necessarily an Astro problem but a CSS problem but in this website here https://github.com/martinjh99/astro-navbar-test1 How would I style the dropdowns to show over the content rather than push the content and the rest of the menu down like it does now?
#Styling menus drop over the content
short geyser
tardy wyvern
Hi, that repo seems to be private! Could you make it public so I can take a look?
short geyser
Done - Sorry about that... 🙂
tardy wyvern
That's alright
menu.astronav-dropdown {
/* Make sure that all children of this element are positioned relative to the parent (this element) */
position: relative;
}
div.astronav-dropdown {
/* Position the dropdown "absolutely" (but still relative to it's parent which we specified above) */
position: absolute;
/* Give the dropdown a background color so the other text isn't visible behind it */
background-color: black;
/* Give the dropdown a border so we can make sure the black dropdown-background is visible on the black page-background */
border: 1px solid #00aa00;
/* Since we're going from top to bottom when using the `top` keyword, we first need to move down by the parent element's height to get to the bottom, then add 4 more pixels to that */
top: calc(100% + 4px);
}
Pasting this into your global.css would make it look like the screenshots I attached. I can highly recommend the following pages so you understand what I'm doing here:
- The MDN positioning guide to understand
position: relativeandposition: absolute - The CSS
calc()function on MDN for better understanding thetop: calc(100% + 4px)part
If you don't understand something, or have more questions, feel free to ping me :D
short geyser
Nice one thanks - will look at those CSS docs as well as I only know enough to be dangerous!
Works as well thanks - Didn't know you could style the actual navbar and dropdowns
tardy wyvern
You can basically style anything in the DOM as long as you have the selector, that goes for classes (.my-class), ids (#my-id) and even elements themselves (div, nav, span)