Site URL: https://nastycutrecords.com/
Hey,
I have a folder with two links, and I would like them to appear, next to each other and be centered under the navigation items/links.
I have managed to go this far:
I can get the dropdown to appear as I want it too, but it only works like this on my screen and only in maximized window. If the page is accessed through a machine with a different screen resolution or the window size is changed, then the dropdown menu doesn't appear centered under the 3 navigation bar links.
Here is the code I used to make it this far (added to custom CSS in design):
.header-nav .header-nav-item--folder {
position: static;
}
.header-nav-folder-content {
background: #d9edf2 !important;
border-top: 1px solid black;
display: flex;
justify-content: space-evenly;
position: static;
padding: 0 !important;
width: 280px !important;
left: 40.4% !important;
top: 38px !important;
}
Any ideas on how to make the dropdown responsive, in order to appear centered under the navigation under all circumstances (except for mobile ofc)?
As a next step, I would like to make it appear only after clicking and maybe adding some more animation to it if possible, but I know there might be some articles on that.
Thanks :)