Andy_NCR Posted November 6, 2021 Share Posted November 6, 2021 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 :) Link to comment
Solution tuanphan Posted November 7, 2021 Solution Share Posted November 7, 2021 Hi, Remove your code & try this new code .header-nav-folder-content { width: 250px !important; display: flex; flex-wrap: nowrap; left: 50% !important; transform: translateX(-50%); justify-content: space-between; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Andy_NCR Posted November 8, 2021 Author Share Posted November 8, 2021 Thanks a lot! That solved the issue I was having 🙂 Link to comment
Andy_NCR Posted November 8, 2021 Author Share Posted November 8, 2021 I am trying to get rid of the underline for active links using the codes on other forum posts but can't get it to work. Ideally I would like to the active link in nav bar to appear in a different color. Any ideas on that? Link to comment
tuanphan Posted November 10, 2021 Share Posted November 10, 2021 On 11/9/2021 at 1:07 AM, Andy_NCR said: I am trying to get rid of the underline for active links using the codes on other forum posts but can't get it to work. Ideally I would like to the active link in nav bar to appear in a different color. Any ideas on that? Add to Design > Custom CSS div.header-nav-item--active a { background-image: none !important; color: red !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment