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

Wells Template - Mobile Drop Menu Issue

Question

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

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 0

@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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@vbonates You should share site url to community check!


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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



You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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



You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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






You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

 

 

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)

Thank you so much 🙌

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

Greetings from Germany

Edited by VerenaK

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...