Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

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


cmuzyka

Question

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

10 answers to this question

Recommended Posts

  • 0

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
  • 0

@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
  • 0
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
  • 0
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

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

Create an account or sign in to comment

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

×
×
  • Create New...