daniellenoakes Posted December 4, 2023 Share Posted December 4, 2023 https://www.annajonesbridal.co.uk/home-new hey, so ive forced mobile menu dropdown / overlay menu on desktop, now i'm having a hard time editing it. on mobile, it is really nearly there with how it looks. it's just the button i need customising and moving! the button should look like the attached, just a text link and line underneath: and then the desktop version, the spacing is all off! is there a way to fix the link / menu item list / page line height of the desktop version only and be able to see the star icon etc like the mobile version? Link to comment
Solution JayVanDyke Posted December 4, 2023 Solution Share Posted December 4, 2023 It looks to me like it's a margin that is blowing up those links and making them so tall. You can try something like this. I just put some numbers in that I eyeballed using the browser but you might have better numbers that will look better. Also if you need adjustments at other screen sizes for the same things, smaller laptop, tablet, etc just copy and paste it again and change the numbers for the new one. @media only screen and (min-width: 641px) { //change to adjust for a different screen width .header-menu { .header-menu-nav-folder { &:before { left: -9vw; //adjust this for left to right spacing for the star } .header-menu-nav-item a { //adjust these for the vertical spacing. margin-top: 1vw; margin-bottom: 1vw; } } } ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
daniellenoakes Posted December 4, 2023 Author Share Posted December 4, 2023 thank you so much thats amazing! worked a treat!! do you happen to know the code for the button so i can customise it ? thank you again so much Link to comment
JayVanDyke Posted December 4, 2023 Share Posted December 4, 2023 @daniellenoakes might have to tweak it a but but this should target it. Change your colors and things to match whatever you need! .header-menu { .header-menu-cta .btn { font-size: .9em !important; font-family: 'montserrat' !important; border: none !important; font-weight: 600 !important; letter-spacing: .2em !important; border-bottom: 1px solid #19191e !important; color:#19191e !important &:hover { background-color: transparent; color: #81919f !important; border-bottom: 1px solid #81919f !important } } } tuanphan and daniellenoakes 1 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links 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