Jump to content

Centering the drop down menu in two different main pages

Recommended Posts

Site URL: https://www.filmmining101.com

Hi all,

You can find my website here: https://www.filmmining101.com

I recently added some code to include a drop down menu for two of my main pages there: Hall of Fame and Articles.

What I want is pretty simple: to align nicely the drop down menu to each page respectively - the Hall of Fame looks pretty bad.

I have added the following code in the Custom CSS:


/* change the width of the drop down menu*/
.header-nav .header-nav-item--folder .header-nav-folder-content {
	min-width: inherit !important; 
        width: 50px;
  		height: 45px;
}

.header-nav-folder-content {
    text-align: center !important;
}

but it looks pretty average. Any chance of having this right under each tab 'Hall of Fame' and 'Articles', center alignment and a nice symmetrical border? And if possible border cell between "scores", "actors", "links", "lists"?

Any help will be appreciated!

Link to comment

Hi. Add to Design > Custom CSS

/* align left dropdown */
.header-nav-folder-content {
    right: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    width: 100% !important;
    height: auto !important;
}

 

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
54 minutes ago, sladewilson871 said:

Thank you! 

That makes it better!

However, is there any way of adding borders to the cells of the drop down menu?

I don't have borders but this is what I  have in CSS to do a gradient with rounded edges.

/*gradient folders*/
.header-nav-folder-content{background:linear-gradient(to bottom, #000000,#696969) }

/*rounded dropdowns*/
.header-nav-folder-content{border-radius:15px}

My site is https://queenoftaboo.squarespace.com if you want to have a look at it.

Edited by sayreambrosio
Link to comment
On 3/28/2022 at 5:24 AM, sladewilson871 said:

Thank you! 

That makes it better!

However, is there any way of adding borders to the cells of the drop down menu?

Use this new code

/* align left dropdown */
.header-nav-folder-content {
    right: auto !important;
    text-align: left !important;
    width: 100% !important;
    height: auto !important;
}
.header-nav-folder-content div {
    border-bottom: 1px solid;
}

 

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...

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.