[Resolved] Mobile Menu Changes

[Chris]

Okay. The site is coming right along.

1) As the menu becomes mobile, what can I do to differentiate between the top of the menu and the content?

View post on imgur.com

2) How do I adjust the button at this size to look more normal and NOT fill the space?

View post on imgur.com

3) How do I adjust the overall padding of the mobile menu?

4) How do I adjust the padding of the menu items?

http://gtg2107.giantishere.com

[Leo]

Hi Chris,

The link is not working for me. Can you double check?

[Tom]

Is this the site?: http://gtg2017.giantishere.com/

If so, the mobile menu has a shadow to separate it, and the navigation search looks good: https://www.screencast.com/t/P2lT5jAS

As for the button, try this:

@media (max-width: 768px) {
    .button.gtg-btn-red-header a {
        display: inline-block;
    }
}

[Chris]

That worked for the button. Thanks!

[Chris]

I’ve added this code to decrease the buttons padding in the mobile menu but it doesn’t seem to be sticking for some reason.

.button.gtg-btn-red-header a,
.button.gtg-btn-red-header a:visited {
	color: #ffffff !important;
	background-color: #CF0A2C !important;
	padding: 6px 12px !important;
	margin: -15px -10px 0 -10px !important;
    border-radius: 12px !important;
}
.button.gtg-btn-red-header a:hover,
.button.gtg-btn-red-header a:active {
	background-color: #97021c !important;
	color: #ffffff !important;
}
@media (max-width: 768px) {
    .button.gtg-btn-red-header a {
        display: inline-block;
        padding: 3px 7px !important;
    }
}

[Tom]

You’d have to do this:

@media (max-width: 768px) {
    .button.gtg-btn-red-header a,
    .button.gtg-btn-red-header a:visited {
        display: inline-block;
        padding: 3px 7px !important;
    }
}

[Chris]

For some reason, the height of the button is still not changing. It will affect the width, but no the height.

[Tom]

Try: line-height: 15px;

[Chris]

No effect.

[Tom]

Change this selector:

.button.gtg-btn-red-header a, 
.button.gtg-btn-red-header a:visited

To:

.main-navigation .main-nav ul li.button.gtg-btn-red-header a,
.main-navigation .main-nav ul li.button.gtg-btn-red-header a:visited

[Chris]

Just wanted to let you know I’ve tried this and it seems to have no effect.

https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

http://gtg2017.giantishere.com/contact-forms/newsletter-signup/

View post on imgur.com

Thanks!

[Leo]

Hmm don’t see the CSS being executed. Everything is still triggering at 768px.

Any chance there are syntax errors above the code you’ve added that stops this CSS from being executing?

[Chris]

I’ll check.

[Chris]

That’s the second time now. I’ll check that first before posting. Thanks as always!

[Leo]

Glad we could help!

[Author]

Posts