Jump to content

Burger Menu in desktop view with transparent background and custom size (not full screen)

Recommended Posts

Site URL: https://www.tma-mdpartner.com

Hi Squarespacers!

I'm totally new to squarespace and have '0' knowledge in coding. I've been struggling for a week finding the solution to creating a dual language web. I found the code on Youtube which allowed my to customize the menu to appear in one language at a time. But there's a problem with the code since it won't display the submenu (dropdown) in the second language (English) in the mobile view as shown in Figure 1.2

Figure 1.1 : The submenu works ok in the first language, which is Thai.

image.png.d3c9c61515396ab2072009b809e53245.png

Figure 1.2 : The submenu won't be displayed when clicked in the mobile view.

image.png.1dfde96cfa69442f96f2b8a15fa19009.png

Figure 1.3 : The code works fine in the desktop mode.

image.thumb.png.745e2b5e0271053fc9dda2f8f959f442.png

 

So I ended up with not using the dropdown menu with the troubled code with English burger menu in mobile view. But this leaves too options in the desktop view which doesn't look very pretty 😞 

image.thumb.png.ab5e22b424bf6e8c204361877b42fe92.png

So I forced a burger menu in desktop view to avoid overloaded options in the menu bar.

image.thumb.png.46c04738ea3511bed3badd95b6385fc7.png

However, I'm now struggling with the burger menu when expended in desktop mode which takes up the whole screen and the space between options is way too big. I tried many codes already but didn't work. 😞 

image.thumb.png.bcada150bd7a8c0b04d046db3325c7b5.png

 

So I'm asking for helps here if you could please let provide the codes that would let me:

1) Minimise  / customize the size of burger menu when expanded

2) Minimise the space between options in the menu

3) Make the background transparent

or even better if 

4) Fix the issue of the dropdown menu in mobile not displayed (I'll give the code I used in my reply to this post)

 

Here's website : https://www.tma-mdpartner.com/ 

Please help. Thank you so much in advance. Cheers!

Sean 🙂

 

image.png

image.png

Edited by Seanth
Typo
Link to comment
  • Replies 3
  • Views 723
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Here's the code I used to force the burger menu in desktop view.

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:992px) {
 /* hide navigation */
    .header-nav {
    display: none;
    background-color: transparent;
<--- doesn't seem to work!
}
  
/* Hide header button */
.header-actions {
    display: none;

/* show burger */
.header-burger {
  display: flex; 
  
/* Show overlay mobile menu */
.header--menu-open .header-menu {
  opacity: 1;
  visibility: visible;
  line-height: 1em;
}
  .header--menu-open {
  transition: opacity .5s;
  opacity: 0.9
<--- doesn't seem to work!
  background-color: transparent; <--- doesn't seem to work!
  visibility: visible;
  line-height: 1em;
}
}

Link to comment

Here's the code I used for dual language menu in Code injection.

<style>
  #header .header-nav-item:nth-child(1){
    display:none
  }
    #header .header-nav-item:nth-child(2){
    display:none
  }
    #header .header-nav-item:nth-child(3){
    display:none
  }
    #header .header-nav-item:nth-child(4){
    display:none
  }
    #header .header-nav-item:nth-child(5){
    display:none
  }
    #header .header-nav-item:nth-child(6){
    display:none
  }
    #header .header-nav-item:nth-child(13){
    display:none
  }    
    #header .header-nav-item:nth-child(16){
    display:none
  }
  
  @media screen and (max-width:1511px){
    #header .header-menu-nav-item:nth-child(1){
    display:none}
    #header .header-menu-nav-item:nth-child(2){
    display:none}
    #header .header-menu-nav-item:nth-child(3){
    display:none}
    #header .header-menu-nav-item:nth-child(4){
    display:none}
    #header .header-menu-nav-item:nth-child(5){
    display:none}
    #header .header-menu-nav-item:nth-child(6){
    display:none}
    #header .header-menu-nav-item:nth-child(13){
    display:none}    
    #header .header-menu-nav-item:nth-child(16){
    display:none} 
  }
</style>

Link to comment

I've fixed the space between the line in the menu with:

  .header-menu-nav-item a {
   margin-top: 12px;
   margin-bottom: 12px;}

But still unable to control the size of the menu navigation folder. Not sure where I need to put this one:

  .header-menu-nav-folder{
   min-height: 50%;
   max-height: 50%; }

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.