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

For the header of the mobile view, how can you show 3 things: hamburger menu, logo and a button?


zzlogan

Question

9 answers to this question

Recommended Posts

  • 0

Hi,

I edited one of @tuanphan responses to a similar query, with some tweaks for your setup:. Tuan is the expert, I'm still learning 🙂

@media screen and (max-width:1024px) {

/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
          width: 10% !important;
}

/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
}


.header  .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title .header-mobile-logo {
    padding-right: 0px;
    padding-left: 10px;
    }

Link to comment
  • 1

@tuanphan @ErikaT,

thank you for the input, here is the code I used and slightly adjusted,

 

@media screen and (max-width:1024px) {

/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
          width: 0% !important;
             padding-right: 0px;
          padding-left: 0px;
}

/* logo width */
.header-title-nav-wrapper {
    flex: 100% !important;
    //width: 50% !important;
    //max-width: 500px;
    padding-right: 0px;
    padding-left: 0px;
}
}
/* burger width */
.header-burger {
    //flex: 0% !important;
      font-size: 10px;
    width: 15% !important;
    margin-left: -13px;
}
.container.header-menu-nav-item a {

}
.header  .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title .header-mobile-logo {
    padding-right: 0px;
    padding-left: 0px;
  }

also this post helped: 

 

Link to comment
  • 0
On 3/23/2021 at 9:19 AM, zzlogan said:

Site URL: https://pomegranate-badger-p3wd.squarespace.com/magazine

I'm trying to make the Mobile header show three things:
hamburger menu / Logo / Button "Buy / Subscribe", I attached what I currently have (SpaceonSpace).
 
I also attached what I'm trying to go for (Offscreen).  What would you recommend? 
 
 

current menu.png

goal for mobile menu.png

Hi. Do you still need help? Which plan do/will you use?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 3/23/2021 at 1:45 AM, ErikaT said:

Hi,

We'd need the password to your site to confirm the coding/positioning.

Also how would you want it displayed: BURGER | LOGO | BUTTON?

Thanks, Erika

thank you! this worked out great! 

Link to comment
  • 0

Hi,

Sure, with the below (enclose the below in your 1024px media query if you want the rounded effect etc on mobiles/tablets only). You may need to adjust your logo padding slightly again after this 🙂

.header-actions-action--cta a {
border-radius: 5px;
padding: 0.8em 0.8em !important;
}

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