LukeView Posted November 7, 2023 Share Posted November 7, 2023 (edited) I'm trying to make the drop down be placed further down when hovering over services so its below the top nav. I'm also trying to make the text highlighted in the top nav whenever you hover over it. Whether that be with a line underneath or something else. And to apply this to the drop down menu when the user hovers over any link there too. link: https://www.viewagency.co.uk Password is viewtest. Edited November 7, 2023 by LukeView adding link Link to comment
SaranyaDesigns Posted November 7, 2023 Share Posted November 7, 2023 @LukeView can you include link to your site please? 🙂 LukeView 1 Link to comment
Solution SaranyaDesigns Posted November 7, 2023 Solution Share Posted November 7, 2023 @LukeView try this? .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0; } .header .header-announcement-bar-wrapper { padding: 0 3vw; } You may need to include !important if it's not overriding the existing styles, like this: .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0 !important; } .header .header-announcement-bar-wrapper { padding: 0 3vw !important; } Link to comment
SaranyaDesigns Posted November 7, 2023 Share Posted November 7, 2023 @LukeView and then for the "highlight", you could add a pseudo element with some animation: .header-nav-item a:after { content: ''; display: block; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 250ms ease-in-out; transform-origin: 0% 50%; } .header-nav-item a:hover:after { transform: scaleX(1); } You may need to play with position/spacing because of the padding we just added to push the submenu down, so might need to add a negative top margin... but need to see it in action first. Link to comment
LukeView Posted November 7, 2023 Author Share Posted November 7, 2023 18 minutes ago, SaranyaDesigns said: @LukeView try this? .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0; } .header .header-announcement-bar-wrapper { padding: 0 3vw; } You may need to include !important if it's not overriding the existing styles, like this: .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0 !important; } .header .header-announcement-bar-wrapper { padding: 0 3vw !important; } Thank you for sending both across, really appreciate it! 🙂 The box positioning is now perfect, I'm just trying to reduce the space between the headings 'Email Marketing' and 'Social Media Marketing' I thought this was in: .header-nav-folder-content a {padding-bottom:.5rem!important;} but after changing the padding, it doesn't seem to change it. Any ideas on how to reduce it? Link to comment
SaranyaDesigns Posted November 7, 2023 Share Posted November 7, 2023 (edited) @LukeView ok how about this: .header-nav-folder-content .header-nav-folder-item a { padding: 0.5em 0 !important; } if that doesn't work, you may need to adjust the original padding we added to target more specifically... so this one: .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0; } change the selectors to something more specific, like .header .header-nav-item>a { padding: 1.25em 0; } Then see if it picks up your other CSS - your thought was correct, but it's being overridden by the new snippet we added, you can see it in the inspector window: Edited November 7, 2023 by SaranyaDesigns Link to comment
LukeView Posted November 7, 2023 Author Share Posted November 7, 2023 9 minutes ago, SaranyaDesigns said: @LukeView ok how about this: .header-nav-folder-content .header-nav-folder-item a { padding: 0.5em 0 !important; } Perfect, that's sorted it. Thank you very much! SaranyaDesigns 1 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