cmuzyka Posted July 24, 2022 Share Posted July 24, 2022 Site URL: https://charmainemuzyka.squarespace.com/ I need some help customizing this navigation, it drives me nuts how much Squarespace's navigation styling tools are lacking! I'd like to fix the giant box extending out to the left and left-justify the text if possible. I could live with the left-justified text but the giant box/frame/container needs to go - anyone have thoughts on this? Ideally it should only extend as far as the text goes. Password is: 2022 I currently have this code in my Custom CSS section: // NAVIGATION HOVER COLOR // .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #4AC5B0 !important; } // DROPDOWN NAV - ALIGN LEFT // .Header-nav-folder * { text-align: left; } // NAV DROP DOWN FONT STYLES // .header-nav-folder-item a { font-size: 15px; font-weight: 300; line-height: 150%; } notsirk 1 Link to comment
rewatechno Posted July 24, 2022 Share Posted July 24, 2022 @cmuzyka Here's the code you should apply for better result ( I've added screenshot of final result ) // SIMPLY COPY AND PASTE BELOW CODE // and confirm .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { /* left: auto; */; /* right: -1em; */; text-align: left !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: 100% !important; padding: 20px !important; } Link to comment
cmuzyka Posted July 24, 2022 Author Share Posted July 24, 2022 (edited) It's not quite working correctly - please see screenshots below Edited July 24, 2022 by cmuzyka Link to comment
Solution rewatechno Posted July 24, 2022 Solution Share Posted July 24, 2022 I saw that having issue with alignment here's the revised code .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { left:0 !important; /* right: -1em; */; text-align: left !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: 100% !important; padding: 20px !important; } tubaozkan1, cmuzyka and notsirk 1 2 Link to comment
rewatechno Posted July 24, 2022 Share Posted July 24, 2022 .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { left: 0 !important; right: auto !important; text-align: left !important; } Summit227 and cmuzyka 1 1 Link to comment
cmuzyka Posted July 24, 2022 Author Share Posted July 24, 2022 That last fix worked, thank you SO MUCH!! Link to comment
rewatechno Posted July 24, 2022 Share Posted July 24, 2022 Welcome, ping me anytime if more help needed. Link to comment
joach Posted August 10, 2022 Share Posted August 10, 2022 Hi @jaydiprewa sorry to bother you. You seem super knowledgeable and I was hoping you might be able to help me out with my question. Link to comment
Guest Posted August 10, 2022 Share Posted August 10, 2022 On 7/24/2022 at 5:30 AM, jaydiprewa said: I saw that having issue with alignment here's the revised code .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { left:0 !important; /* right: -1em; */; text-align: left !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: 100% !important; padding: 20px !important; } Link to comment
Guest Posted August 10, 2022 Share Posted August 10, 2022 Hello, I am trying to add the code above to the custom CSS and it is not working. Could there be anything I am missing? Apprecaite any help. Link to comment
tuanphan Posted August 11, 2022 Share Posted August 11, 2022 17 hours ago, Sitehelp said: Hello, I am trying to add the code above to the custom CSS and it is not working. Could there be anything I am missing? Apprecaite any help. Depend on your template. What is your site url? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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