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

changing the width of the drop down menu


Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://www.madeinbed.co.uk how do I change the width of the drop down wider according to the width of the text?

Posted Images

3 answers to this question

Recommended Posts

  • 0
3 hours ago, Emily_Crozier said:

Site URL: https://www.madeinbed.co.uk

how do I change the width of the drop down wider according to the width of the text?

Could you try

@media screen and (min-width: 0px) {
  [data-folder="root"] .header-menu-nav-item a {
      padding: 10px 2vw;
      margin: 0;
  }  
  .header-menu {
    max-width: 50%;
}
}

image.thumb.png.34a3dffd8b002dc003ee368f56d9d2f5.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

The Customs CSS currently looks like this and now the button for the drop down menu won't work-

@media screen and (min-width: 0px) { [data-folder="root"] .header-menu-nav-item a {padding: 10px 2vw; margin: 0;} .header-menu {max-width: 50%;}
  @media screen and (min-width: 0px) { [data-folder="root"] .header-menu-nav-item a { padding: 10px 2vw; margin: 0; } .header-menu { max-width: 50%; } } [data-folder="root"]{.header-menu-nav-item a{padding: 10px 5vw;}.header-menu-nav-folder-content{justify-content: space-evenly;margin-top: 20px;margin-bottom: 20px;}}.header-menu-nav-folder-content{justify-content: flex-start;}.header-menu-nav-item a{padding: 20px 5vw;}.header-menu-actions{margin: 15px 20px;}.header--menu-open:not([data-menu-overlay-theme-switcher="true"]) .header-menu .header-menu-cta a{margin-top: 20px;}.header-menu-nav-folder{transform:translate(0, 0)!important;}.header-menu-nav-folder--open,.header-menu-nav-folder:not(.header-menu-nav-folder--active){opacity:0;pointer-events:none;transform: translate(0, 20px)!important;transition:all 600ms cubic-bezier(.4,0,.2,1);}.header-menu-nav-folder--open + .header-menu-nav-folder--active{opacity: 1;}#header[data-current-styles*="NavRight"]{.header-menu{left:auto;right:0;}.header-menu-nav-list,.header-menu-bg{transform:translateX(100%);transition:all 600ms cubic-bezier(.4,0,.2,1);}}.header--menu-open #header[data-current-styles*="NavRight"]{.header-menu-nav-list,.header-menu-bg{transform:translateX(0);}}.header-menu-nav-item{padding-left:30px;padding-right:30px;a{padding-left:30px;padding-right:30px;}}.header-menu-nav-list{transform:translateX(-100%);}.header-menu-bg{transform:translateX(-100%);transition:all 600ms cubic-bezier(.4,0,.2,1);
}.header--menu-open .header-menu-bg{transform:translateX(0);}.header-menu-nav-folder{overflow-y:auto;}.header-display-mobile{display:flex}.header-display-mobile .showOnDesktop{display:none}.header-display-desktop{display:none}.header-display-desktop .showOnMobile{display:flex}.header-title{flex-grow:1}.header-burger{display:flex}.header-nav{display:none}.header-layout-nav-right .header-title{flex-grow:1}.header-layout-nav-left .header-title{flex-grow:1}.header-layout-nav-center .header-title{min-width:0;flex-grow:1}.header .header-burger{margin-right:0;align-items:flex-end;justify-content:flex-end;flex:0 0 50px;width:50px}.header .header-burger.no-nav-links.no-actions{display:none}.header .header-actions--left{display:none}.header-actions--right .header-actions-action--cart{margin:0}.header .header-title-nav-wrapper{flex:1 0 calc(~"100% - 50px")}.header .header-title-nav-wrapper .header-title{margin-right:0;flex:1 0 100%;text-align:left}.header .header-title-nav-wrapper .header-nav{display:none}.header .header-actions,.header .header-actions-action--social,.header .header-actions-action--cta{display:none}.header .header-layout--with-commerce .header-burger,.header .header-layout--with-user-accounts .header-burger,.header .header-layout--with-button .header-burger{margin-left:0;margin-right:0;flex:0 0 50px;width:50px;align-items:flex-start;justify-content:flex-start}.header .header-layout--with-commerce .header-title-nav-wrapper,.header .header-layout--with-user-accounts .header-title-nav-wrapper,.header .header-layout--with-button .header-title-nav-wrapper{flex:1 0 calc(~"100% - 100px - 2vw")}.header .header-layout--with-commerce .header-title-nav-wrapper .header-title,.header .header-layout--with-user-accounts .header-title-nav-wrapper .header-title,.header .header-layout--with-button .header-title-nav-wrapper .header-title{margin-right:0;flex:1 0 100%;text-align:center}.header .header-layout--with-commerce .header-actions,.header .header-layout--with-user-accounts .header-actions,.header .header-layout--with-button .header-actions{display:inline-flex;flex:0 0 50px}.header .header-layout--with-commerce .header-actions--left,.header .header-layout--with-user-accounts .header-actions--left,.header .header-layout--with-button .header-actions--left{display:none}.header .header-display-mobile.with-button .header-title-nav-wrapper{flex:1 1 80%}.header .header-display-mobile.with-button .header-actions{flex:1 0 100px}.header .header-display-mobile .header-burger.no-nav-links.no-actions{display:none}.header .header-mobile-layout-logo-left-nav-right .header-display-mobile .header-burger{justify-content:flex-end}.header .header-mobile-layout-logo-left-nav-right .header-display-mobile .header-actions{justify-content:center}.header .header-mobile-layout-logo-left-nav-right .header-display-mobile .header-title{text-align:left}.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-burger{justify-content:flex-end}.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-actions{justify-content:flex-start}.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title{text-align:center}.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title .header-title-text{padding-left:50px}.header .header-mobile-layout-logo-right-nav-right .header-display-mobile .header-burger{justify-content:flex-end}.header .header-mobile-layout-logo-right-nav-right .header-display-mobile .header-actions{justify-content:flex-start}.header .header-mobile-layout-logo-right-nav-right .header-display-mobile .header-title{text-align:right;padding-right:10px;flex:1 0 calc(~"100% - 50px")}.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-burger{justify-content:flex-start}.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-actions{justify-content:flex-end}.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title{text-align:center}.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title .header-title-text{padding-right:50px}.header .header-mobile-layout-logo-right-nav-left .header-display-mobile .header-burger{justify-content:flex-start}.header .header-mobile-layout-logo-right-nav-left .header-display-mobile .header-actions{justify-content:center}.header .header-mobile-layout-logo-right-nav-left .header-display-mobile .header-title{text-align:right}.header .header-layout--with-commerce.header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title .header-title-text,.header .header-layout--with-commerce.header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title .header-title-text{padding:0}.header .customerAccountLoginDesktop{display:none}[data-mobile-header-editing="true"] .header .header-title--use-mobile-logo .header-title-logo{display:none}[data-mobile-header-editing="true"] .header .header-title--use-mobile-logo .header-mobile-logo{display:block}[data-mobile-header-editing="true"] .header .header-title--use-mobile-logo .header-mobile-logo a{max-height:30px}[data-mobile-header-editing="true"] .header .header-title--use-mobile-logo .header-mobile-logo img{max-height:80px}.header-menu{transition:visibility 600ms cubic-bezier(.4,0,.2,1),opacity 400ms cubic-bezier(.4,0,.2,1)}.header--menu-open .header-menu{opacity:1;visibility:visible}.header--menu-open .sqs-mobile-info-bar-content{z-index:10}#header .header-menu-cta{transform:translatey(0)}} 
//End Mobile Slide Out on 7.1

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...