Issue with Navigation

Support
#1

Can you please help with Menu and Nav. (http://memphistabernacle.com/)

I have two issues.

  1. The dropdown nav is dropping down from the top of the screen rather than under the navigation link. (I dont currently have this live because it was so odd, but I have attached screen shots.

  2. How can I make the background of the mobile nav all white rather than the white background cutting off. (I also attached screenshots of this.)

Thank you in advance for your help with this.

#2

Hi @bcoplin

I’ve checked your site and this issue could be due to the custom CSS codes you have added to (Theme Options > CSS), could you please take a backup of these codes, then delete it and recheck this issue?

Also, I couldn’t manage to log in your website with these credentials, I think there is a security login plugin activated on your website, so please disable this plugins -temporarily- and confirm that the login credentials are working fine.

Thanks.

#3

It is still the same issue. And I apologize i will attache the correct credentials.

#4

Hi @bcoplin

After further investigation, the reason for that is the transparent navbar option:

You can overcome this issue on mobile devices by adding this CSS snippet to (Theme Options > CSS):

@media screen and (max-width:980px){
    .x-navbar {
        background: #fff; 
    }
}

Thanks.

#5

Thanks for that, the only issue is that it the whole nav bar turns white rather than just the drop down. I would like the nav bar to stay transparent… Is it possible to make only the dropdown fill in all white?

#6

Hi There,

I see that you used a huge negative margin on the first section to achieve the looks of your header, but that is causing you the issue on mobile. Please set that margin back to 0, then use the following custom CSS instead.

.masthead.masthead-inline {
	height: 0;
}

Then for the mobile dropdown to have a white background, please add the following custom CSS to Theme Options > CSS

@media (max-width: 979px) {
.x-nav-wrap.mobile {
    background-color: #fff;
	    padding-left: 6%;
	    padding-right: 6%;
	}
}

With this, you need to make the Gap above the Headline to be visible on mobile.

I have found the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#7

Thank you that helped!

One last tweek, is it possible to change the opacity, color and drop shadow of the dropdown background on the desktop…

I will attach a picture.

#8

Hi again,

You can make use of the following code:

.x-navbar .desktop .sub-menu {
    background-color: rgba(255,255,255,0.6);
    box-shadow: 0 3px 20px rgba(0,0,0,0.25);
}
.x-navbar .desktop .sub-menu a {
    color: #286878 !important;
}

Feel free to adjust the values as per your need. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

#9

Thank you for all your help!

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.