Trouble Customizing the Width of Specific Dropdown Menus

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

The password is fbla2020

I am not sure of how to customize the width of the specific dropdown menus in the navigation bar (specifically "Portfolio" and "Contact" should be different widths since "Appointments" is a longer word compared to "Beverages.") I am using the Zion template under Photography. Any help with custom CSS would be greatly appreciated!

34 minutes ago, jaxnoel said:

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

The password is fbla2020

I am not sure of how to customize the width of the specific dropdown menus in the navigation bar (specifically "Portfolio" and "Contact" should be different widths since "Appointments" is a longer word compared to "Beverages.") I am using the Zion template under Photography. Any help with custom CSS would be greatly appreciated!

 

If you want to make the dropdown width auto fit the content

.header-nav .header-nav-item--folder .header-nav-folder-content {
  width: auto;
}

If you want to control for each item, feel free to change the value yourself

.header-nav .header-nav-item--folder .header-nav-folder-title[href*="portfolio-1"] + .header-nav-folder-content {
  width: 100px;
}
.header-nav .header-nav-item--folder .header-nav-folder-title[href*="pricing"] + .header-nav-folder-content {
  width: 150px;
}

10 hours ago, bangank36 said:

If you want to make the dropdown width auto fit the content

.header-nav .header-nav-item--folder .header-nav-folder-content {
  width: auto;
}

If you want to control for each item, feel free to change the value yourself

.header-nav .header-nav-item--folder .header-nav-folder-title[href*="portfolio-1"] + .header-nav-folder-content {
  width: 100px;
}
.header-nav .header-nav-item--folder .header-nav-folder-title[href*="pricing"] + .header-nav-folder-content {
  width: 150px;
}

 

It works! Thank you so much

On 12/19/2020 at 12:03 AM, bangank36 said:

If you want to make the dropdown width auto fit the content

.header-nav .header-nav-item--folder .header-nav-folder-content {
  width: auto;
}

If you want to control for each item, feel free to change the value yourself

.header-nav .header-nav-item--folder .header-nav-folder-title[href*="portfolio-1"] + .header-nav-folder-content {
  width: 100px;
}
.header-nav .header-nav-item--folder .header-nav-folder-title[href*="pricing"] + .header-nav-folder-content {
  width: 150px;
}

 

Hey! Sorry for the very late question but I think that while I was changing other parts of my site I messed up a part of my code so now this piece of quoted code is ineffective. I'm not sure if it is because of where I put it (relative to the other custom code) or because I deleted a part of the code integral to its function. Again, I am trying to customize the size of the dropdown menu so it fits with the length of the word. Currently, it is much longer than I want it. 

Thank you so much for your help! 

10 minutes ago, jaxnoel said:

Hey! Sorry for the very late question but I think that while I was changing other parts of my site I messed up a part of my code so now this piece of quoted code is ineffective. I'm not sure if it is because of where I put it (relative to the other custom code) or because I deleted a part of the code integral to its function. Again, I am trying to customize the size of the dropdown menu so it fits with the length of the word. Currently, it is much longer than I want it. 

Thank you so much for your help! 

Try this

.header-nav .header-nav-item--folder .header-nav-folder-content {
  min-width: inherit;
}

11 hours ago, bangank36 said:

Try this

.header-nav .header-nav-item--folder .header-nav-folder-content {
  min-width: inherit;
}

 

Thank you so much!