Wells Template - Mobile Drop Menu Issue

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

@vbonates You should share site url to community check!

Thanks!

www.vitorbonates.com

Thanks!

www.vitorbonates.com

Ah thank you so much! Much appreciated! @tuanphan

Ah thank you so much! Much appreciated! @tuanphan

@vbonates You're welcome. Have you a nice day :-D

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?

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?

@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;
}

@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;
}

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

@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;
}
}

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;
}

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;
}
}

Thank you so much 🙌

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

Greetings from Germany

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;
}

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

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

This thread has been super helpful, thank you!

I was able to get my mobile navigation set up exactly the way I want it per the above messages, however I'm running into an issue whereby my fixed mobile header with the white background is cutting into the leading content on each of my pages. See attached screenshot (I'm viewing on an iPhone 12 Pro Max / Safari). There's a large chunk of the leading photo that is being overlapped by the fixed header. Is there a way to push the page content down in mobile view so the photo isn't getting cut off?

https://www.ianmichelman.com/portraits

On 4/6/2023 at 12:26 AM, ismichelman said:

This thread has been super helpful, thank you!

I was able to get my mobile navigation set up exactly the way I want it per the above messages, however I'm running into an issue whereby my fixed mobile header with the white background is cutting into the leading content on each of my pages. See attached screenshot (I'm viewing on an iPhone 12 Pro Max / Safari). There's a large chunk of the leading photo that is being overlapped by the fixed header. Is there a way to push the page content down in mobile view so the photo isn't getting cut off?

https://www.ianmichelman.com/portraits

 

It looks fine to me