Centering the drop down menu in two different main pages

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!

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

Thank you! 

That makes it better!

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

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.

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

Thank you both! I have incorporated the codes and the website looks slicker now! Many thanks!😀