Jump to content

Wells Template - Mobile Drop Menu Issue

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I'd like to know the css code to change the drop menu on Wells template. So instead of the logo and hamburger icon goes down, I'd like them to stay locked on top and the menu drops under the logo/icon.

Can someone help me please?

Attached the screenshot for a better view of my issue

wrong.png.fdbb9f0036ba0c7385db340516d11362.png

correct.jpg.d23f8a6147d0e3d9b53ac7ee29e2ee65.jpg

Edited by vbonates
Initial Revision
Link to comment
  • Solution

@vbonates Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
div#headerWrapper {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
}
div#mobileNav {
   margin-top: 300px;
}
}


Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

I have 3 more questions. @tuanphan

1 - Now that I paste that code, when I scroll down the logo/icon stay in front of the images. Can you please tell me how can I create a white block so it doesn't look it's transparent when I scroll down?

2 - The drop down menu, can I bold the main subjects? (like DESIGN, PHOTOGRAPHY, MOTION, MATTE, etc) right now all the projects in the same size and style looks weird for me.

3 - This is for desktop version, on the menu, I want the strikethrough hover instead of the grey hover I have right now. Any idea I can change that?

screen-shot-2019-08-21-at-105101-pm.jpg.ed2dbd678a8b582ce7ef336cd40c9ed0.jpg

Link to comment

I have 3 more questions. @tuanphan

1 - Now that I paste that code, when I scroll down the logo/icon stay in front of the images. Can you please tell me how can I create a white block so it doesn't look it's transparent when I scroll down?

2 - The drop down menu, can I bold the main subjects? (like DESIGN, PHOTOGRAPHY, MOTION, MATTE, etc) right now all the projects in the same size and style looks weird for me.

3 - This is for desktop version, on the menu, I want the strikethrough hover instead of the grey hover I have right now. Any idea I can change that?

screen-shot-2019-08-21-at-105101-pm.jpg.bddf1342a39da4d542b88bc5b240cbac.jpg

Link to comment

@vbonates

Q1. If you want to do so, it will have a background, both when standing still and when scrolling down.If you want it to be only background when scrolling down, I think it will need a bit of custom code (JavaScript), it will be more complicated than custom code (CSS, I sent above is CSS).You want?

Q2. Now, main & sub are bold....What do you mean?

Q3.


.main-nav a:hover, .main-nav .folder li a:hover {
   text-decoration: line-through !important;
}


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

@vbonates

Q1. If you want to do so, it will have a background, both when standing still and when scrolling down.If you want it to be only background when scrolling down, I think it will need a bit of custom code (JavaScript), it will be more complicated than custom code (CSS, I sent above is CSS).You want?

Q2. Now, main & sub are bold....What do you mean?

Q3.


.main-nav a:hover, .main-nav .folder li a:hover {
   text-decoration: line-through !important;
}


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

@tuanphan

Thanks for helping. Really appreciated.

Okay, I got the hover done and looks great.

For the first question. So to add a white background is that a custom code? I attached how I was thinking. If it's not too much let me know if its possible to make.

For the second question, you're correct. So I attached how I was thinking now of how the text of the menu should be. I also created a box on the hamburger menu. Let me know if that's something that could be able to do.

Thanks in advance! Really appreciate the help.

screen-shot-2019-08-22-at-12646-am.jpg.74b501b00b3c1ba4417cb9d5da4fe96b.jpg

mobile-menu-idea.jpg.8f3fed75510571c1d45e9f434efdfbff.jpg

Link to comment

@vbonates

Q1. In the code I sent, add background: #fff; like this


@media screen and (max-width: 640px)
div#headerWrapper {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   background: #fff;
}

and edit margin-top: 110px;


@media screen and (max-width: 640px)
   div#mobileNav {
       margin-top: 110px;
   }

Q2.


@media screen and (max-width:640px) {
nav#mobileMenuLink a:before {
   background: #000 !important;
   color: #fff !important;
   padding-top: 5px;
   padding-bottom: 5px;
}
nav.main-nav.mobile-nav li a {
   text-align: right !important;
   margin: 0 !important;
   width: 100% !important;
}
li.mobile-folder>a {
   text-decoration: underline;
}
}





Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 8 months later...

Hi there,

I also used the code for my Wells template and it works well for me, but I have the following problem:

When I scroll down, the header is fixed and you can see and click on my logo/social media buttons, but the 'Menu' doesn't open properly when you scroll down. It would be great if the Menu was still accessable while you are in the middle or at the bottom of a page.

My website:

https://www.marcelkimble.com/

password:

0008

I grateful for any help!!

Here is the code in inserted:


@media screen and (max-width:640px) {
div#headerWrapper {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   background: white;
      background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
    visibility: visible;
 
}
div#mobileNav {
  margin-top: 120px;
}
}

nav#mainNavigation {
    border-bottom: 2px solid #ddd;
    padding-bottom: 20px;
}

 

 

Link to comment
12 hours ago, VerenaK said:

Hi there,

I also used the code for my Wells template and it works well for me, but I have the following problem:

When I scroll down, the header is fixed and you can see and click on my logo/social media buttons, but the 'Menu' doesn't open properly when you scroll down. It would be great if the Menu was still accessable while you are in the middle or at the bottom of a page

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
#mobileNav {
    background: #a3a3a3;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 999;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
19 hours ago, VerenaK said:

Thank you so much 🙌

Is there also a way to replace the word 'Menu' with a simple hamburger symbol?

Greetings from Germany

Add to Home > Design > Custom CSS

div#mobileMenuLink a:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
    visibility: visible;
}
#mobileMenuLink a {
    visibility: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
10 hours ago, VerenaK said:

Thanks for your reply. The code didn't work for me. There is no simple hamburger menu icon appearing...rather a weird blue symbol🤔

Above just an example icon. You can replace url in above code with your burger icon url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.