Jump to content

Need help adjusting navigation drop-down menu - CSS code to left-justify text and fix container

Go to solution Solved by jaydiprewa,

Recommended Posts

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%;
}

CMDesigns-Navigation-Issue.jpg

Link to comment

@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;
}

 

79c55137-e596-4708-b48d-3cb33448375f.jpg

Link to comment
  • Solution

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
  • 3 weeks later...
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
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.