Menu items not visible on Mobile devices – Can't Navigate

  • Hello all
    I am having a brand new issue with my nav bar. As you can see
    https://www.jennshomes.com

    the navigation bar on top is visible and functional on computer screens but on my iphone it just shows the background color and no clickable links to navigate the website. I have tried deactivating all my plug ins in case of a javascript conflict, but that has not worked and I can’t think of any changes I have made to the child theme’s nav.bar to be causing any issues. Any help?
    Thank you in advance

    [Moderator Note: Please ensure that you are embedding links correctly in your posts.]

Viewing 6 replies - 1 through 6 (of 6 total)

  • You have a media query at 643px:

    ul.nav-menu, div.nav-menu > ul {
    display: none;
}

    Lets add this to your custom CSS plugin:

    @media screen and (max-width: 643px) {
ul.nav-menu, div.nav-menu > ul {
    display: block!important;
}}

    Or remove the original one if you can find where it

    Dan

    Thread Starter MontyVision

    (@montyvision)

    This is a great start. It does show the navigation bar but not as it was intended. It shows the whole thing so on my mobile device, it breaks into 3 rows which is not ideal. What I’m looking for is a link I can tab (home) and then it gives me a list of the items on my navigation bar. I hope I’m being clear. Thank you for the response

    Did you intentionally hide the drop-down that usually appears on smaller viewports in your child theme? That is, you have this CSS rule in your child style.css file:

    .menu-toggle {
	display: none;
}

    But there are no media query sections in your child style.css file to display it once the view port reaches a certain size.

    Here’s the pertinent CSS media query section from the parent style.css file, try copying it to the end of your child theme’s style.css file.

    @media (max-width: 643px) {
	/* Small menu */
	.menu-toggle {
		cursor: pointer;
		display: inline-block;
		color: #fff;
		font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
		margin: 0;
		padding: 12px 0 12px 20px;
	}

	.menu-toggle:after {
		content: "\f502";
		font-size: 12px;
		padding-left: 8px;
		vertical-align: -4px;
	}

	.toggled-on .menu-toggle:after {
		content: "\f500";
		vertical-align: 2px;
	}

	.toggled-on .nav-menu,
	.toggled-on .nav-menu > ul {
		display: block;
		margin-left: 0;
		padding: 0;
		width: 100%;
	}

	.toggled-on li,
	.toggled-on .children {
		display: block;
	}

	.toggled-on .nav-menu li > ul {
		background-color: transparent;
		display: block;
		float: none;
		margin-left: 20px;
		position: relative;
		left: auto;
		top: auto;
	}

	.toggled-on .nav-menu li > ul a {
		color: #141412;
		width: auto;
	}

	.toggled-on .nav-menu li:hover > a,
	.toggled-on .nav-menu .children a {
		background-color: transparent;
		color: #141412;
	}

	.toggled-on .nav-menu li a:hover,
	.toggled-on .nav-menu ul a:hover {
		background-color: #db572f;
		color: #fff;
	}

	ul.nav-menu,
	div.nav-menu > ul {
		display: none;
	}
}

    Thread Starter MontyVision

    (@montyvision)

    Thank you!

    I have a question that is somehow related and I can’t find an answer to it here.
    Can you explain to me what the css code….menu-toggle:after { content: “\f502”; } means…
    I realize that it may be an image that is supposed to show up next to the responsive menu but I just get a little square with the F502 written in it…
    can you maybe clarify for me what it is and how I replace it with an image…
    Thanks

    @lindamoes – please start your own thread per:

    https://codex.www.ads-software.com/Forum_Welcome#Where_To_Post

    Scroll to the bottom of this forum and create a new post there.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Menu items not visible on Mobile devices – Can't Navigate’ is closed to new replies.