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

Hamburger Menu Nav across all devices (version 7.1)


rsmith3074

Question

Recommended Posts

  • 0
On 5/4/2021 at 12:50 AM, casafloralia said:

hey everyone,

I'm also trying to keep the hamburger menu on desktop.

I've managed to do it, but can't seem to get my logo in the center.

can anyone help?

here's what I've done so far:


@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths*/ 
  .header .header-burger {
    display: flex;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
  /* burger position */
.header-display-desktop {
    flex-direction: row-reverse;
}
}

https://janetesilveira.squarespace.com/

ps: 1234

Logo looks centered here. Can you explain clearly?

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 5/4/2021 at 12:50 AM, casafloralia said:

hey everyone,

I'm also trying to keep the hamburger menu on desktop.

I've managed to do it, but can't seem to get my logo in the center.

can anyone help?

here's what I've done so far:


@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths*/ 
  .header .header-burger {
    display: flex;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
  /* burger position */
.header-display-desktop {
    flex-direction: row-reverse;
}
}

https://janetesilveira.squarespace.com/

ps: 1234

And I also found some problems. You can create new questions, we will help easier

Site URL – https://janetesilveira.squarespace.com/

1. (Desktop-Header) Remove right scroll?

janetesilveira.squarespace.com-01-min.pn

2. (Tablet-Footer) center logo?

janetesilveira.squarespace.com-02-min.pn

3. (Tablet-Homepage) reduce this space?

janetesilveira.squarespace.com-03-min.pn

4. (Mobile-Blog) Add a space between image – read more?

janetesilveira.squarespace.com-04-min.pn

5. (Tablet-Blog posts) Increase post width?

janetesilveira.squarespace.com-05-min.pn

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 5/5/2021 at 8:34 PM, tuanphan said:

And I also found some problems. You can create new questions, we will help easier

Site URL – https://janetesilveira.squarespace.com/

1. (Desktop-Header) Remove right scroll?

janetesilveira.squarespace.com-01-min.pn

2. (Tablet-Footer) center logo?

janetesilveira.squarespace.com-02-min.pn

3. (Tablet-Homepage) reduce this space?

janetesilveira.squarespace.com-03-min.pn

4. (Mobile-Blog) Add a space between image – read more?

janetesilveira.squarespace.com-04-min.pn

5. (Tablet-Blog posts) Increase post width?

janetesilveira.squarespace.com-05-min.pn

Hi @tuanphan!

Yes! I'd like hep with all that 🙂

 

Link to comment
  • 0
20 hours ago, casafloralia said:

Hi @tuanphan!

Yes! I'd like hep with all that 🙂

 

Add to Design > Custom CSS

/* remove scroll bar on burger desktop */
@media screen and (min-width:992px) {
.header-menu-nav-folder--active {
    overflow: hidden;
}
}
/* tablet */
@media screen and (min-width:768px) and (max-width:992px) {
/* center footer logo */
div#page-section-608ffe74d1bf763c75618aca>.row>.col {
    margin: 0 auto;
    width: 100%;
}
/* reduce space */
[data-section-id="6091547b96145d3ee02ae3e6"] {
    min-height: unset !important;
}
/* increase blog width */
.blog-item-inner-wrapper {
    width: 90% !important;
}
}

 

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
3 hours ago, tuanphan said:

Add to Design > Custom CSS


/* remove scroll bar on burger desktop */
@media screen and (min-width:992px) {
.header-menu-nav-folder--active {
    overflow: hidden;
}
}
/* tablet */
@media screen and (min-width:768px) and (max-width:992px) {
/* center footer logo */
div#page-section-608ffe74d1bf763c75618aca>.row>.col {
    margin: 0 auto;
    width: 100%;
}
/* reduce space */
[data-section-id="6091547b96145d3ee02ae3e6"] {
    min-height: unset !important;
}
/* increase blog width */
.blog-item-inner-wrapper {
    width: 90% !important;
}
}

 

Thank you @tuanphan

The footer logo on tablet is centered but it is way too big. 

Link to comment
  • 0
Posted (edited)

Hi folks,

Anyone know how to force the hamburger menu on all screen sizes AND have it display to the right of the screen? 
N.B. the site has both the shopping cart and the members login enabled and also the social media links. 

Ideally, I'd like to end up with the following:

Logo on the left
Account Login | social links | shopping cart | Burger Menu on the right. 

The site is: https://jezrose.squarespace.com/home

password: flowerpower

Screenshot of the desired outcome attached. Unfortunately the code I am currently using means that resizing the browser window makes the burger icon cover the other header actions.

the current code I'm using is:

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}

/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

.burger-box {
  position: absolute;
  right: -88vw!important;
  top: -15px;
  margin-left:50px
}

Screenshot 2021-05-14 at 19.15.02.png

Edited by nickstein
added screenshot
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...