Aspire-Pro Menu Doesn't Show On Smaller Screen

[Leonidt1985]

Hi there,

When I adjust the screen to be smaller of my website: https://www.Backauthority.com the Menu disappears... Any idea how to fix this? I want to maintain the same look and margin as now... This theme is supposed to be mobile-freiendly.

https://www.Backauthority.com

[Andykev]

@media only screen and (max-width: 800px) {

	
	.genesis-nav-menu.responsive-menu {
		display: none;
		float: none;
		padding-bottom: 20px;
	}

	

You have "display" set to NONE.

[Leonidt1985]

Ok thanks. But can you please tell me which line to change there? And change it from 'None' to what?

[Leonidt1985]

When I changed to "block" it didn't fix it either...

[Andykev]

OK. You changed the .css for the header.

/* # Site Header
---------------------------------------------------------------------------------------------------- */		---------------------------------------------------------------------------------------------------- */
.site-header {		                       .site-header {
	background-color: #000;			background-color: #000;
	border-bottom: 1px solid #ddd;		border-bottom: 1px solid #ddd;
	left: 0;			        left: 0;
	position: fixed;			position: static;
	top: 0;			                top: 0;
	width: 100%;			        width: 100%;
	z-index: 999;			        z-index: 999;
	margin-bottom: -120px;

Your menu is there, but you changed the margin-bottom to -120px. This moved content to cover your "hamburger menu".

The original .css is on the right. Yours is the left.

[Andykev]

On line 2744 of your css

comment out this section

/*----	.site-header .wrap {
		padding: 0 5%;
	}

-----*/

`

Suddenly your menu appears! You can leave the -120px to cover your spacing

[Leonidt1985]

When you say comment out you mean add /*---- and -----*/ after? So that essentially hides it? I did that and it didn't work.

[Leonidt1985]

Well it did work for when the screen gets quite smaller, but in between it didn't show menu. Should I comment it out for all screen sizes?

[Andykev]

Those are your media querries. The .css code "kicks in" as the screen gets smaller in size. This is controlled by the code for each section.

The regular menu is visible and functional, then when the screen gets to a set smaller size, then the main menu is hidden, and the "hamburger menu" pops in.

You have commented out the code incorrectly.

	/*-------------- .site-header .wrap {
		padding: 0 5%;
	}------------*/
	

you have the "------*/ " down a line too far. Needs to be immediately after the "}"

[Author]

Posts