Making menu move as page scrolls on mobile

  • Unknown's avatar
    bcabra · Member ·

    In the Pique Cafe theme, the default behavior for the top navigation menu on a large display is to move as the page scrolls so that it’s always visible. However, on smaller displays, the menu does not move with the page. I’d like to make the menu stay visible as the user scrolls, regardless of screen size.

    I can usually tromp through CSS well enough to figure something like this out, but I’m not getting it. There’s a Sticky Menu element on the regular menu that’s not present on the mobile menu code, but copying it to the mobile didn’t help anything. Here’s the full CSS for the nav menu:

    /* Navigation menu */
#site-navigation-wrapper {
	bottom: 0;
	position: absolute;
	width: 100%;
}

.main-navigation {
	background: #2d2a26;
	border-bottom: 1px solid #49443d;
	border-top: 1px solid #49443d;
	clear: both;
	display: block;
	font-family: Karla, Arial, sans-serif;
	width: 100%;
	z-index: 10000;
	/* Current page highlight */
	/* Priority+ menu */
}
.main-navigation li {
	display: inline-block;
}
.main-navigation a {
	color: #fcfbf9;
	display: inline-block;
	font-size: 12.8px;
	font-size: 0.8rem;
	letter-spacing: 1px;
	padding: 12px 15px;
	text-transform: uppercase;
}
.main-navigation a:hover {
	color: #a7cbdb;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
	color: #e9d5c0;
}
.main-navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	/* Sub-nav */
}
.main-navigation ul ul {
	background: #11100f;
	left: -999em;
	position: absolute;
	text-align: left;
	z-index: 99999;
}
.main-navigation ul ul li {
	display: block;
}
.main-navigation ul ul a {
	border-top: 1px solid rgba(233, 213, 192, 0.1);
	color: #e9d5c0;
	display: block;
	width: 100%;
}
.main-navigation #more-menu {
	display: none;
}
.main-navigation #more-menu.visible {
	display: inline-block;
}
.main-navigation #more-menu > a::before {
	content: 'f476';
	display: inline-block;
	font-family: Genericons;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-decoration: none;
	vertical-align: text-bottom;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: auto;
}

/* Mobile menu */
@media (max-width: 767px) {
	.main-navigation {
		/* Show mobile menus when "focus" class is added via JS */
		/* Sub-menus */
		/* Sub-sub-menus */
	}
	.main-navigation a {
		padding-left: 10px;
	}
	.main-navigation li.focus > ul {
		left: 0;
	}
	.main-navigation ul ul {
		border-bottom: 1px solid #49443d;
		width: 100%;
	}
	.main-navigation ul ul ul {
		border-bottom: none;
		left: 0;
		padding-left: 25px;
		position: relative;
	}
	.main-navigation ul ul ul a {
		padding-left: 0;
}

/* Regular menu */
@media (min-width: 768px) {
	.main-navigation {
		left: 50%;
		max-width: 1400px;
		position: relative;
		-webkit-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		        transform: translateX(-50%);
		/* Sub-nav */
		/* Sub-sub-menu */
		/* Show sub-menus on hover */
		/* Menu items on the right-hand side of the screen should display to the left, so they don't run off the screen */
		/* Adjust position of arrow for our last two menu items */
		/* Adjust position of sub-nav for these final two menu items also */
	}
	.main-navigation ul {
		display: block;
		list-style: none;
		margin: 0;
	}
	.main-navigation li {
		position: relative;
	}
	.main-navigation ul ul {
		left: -999em;
		min-width: 200px;
		position: absolute;
		top: 37px;
		/* This is just here to make it easier to scroll down to the drop-down */
	}
	.main-navigation ul ul::before {
		border-color: transparent transparent #11100f transparent;
		border-style: solid;
		border-width: 0 7px 7px 7px;
		content: '';
		display: block;
		height: 0;
		left: 15px;
		position: absolute;
		top: -5px;
		width: 0;
	}
	.main-navigation ul ul::after {
		content: '';
		display: block;
		height: 20px;
		left: 0;
		position: absolute;
		top: -10px;
		width: 100%;
	}
	.main-navigation ul ul li:first-of-type a {
		border-top: none;
		/* Remove border for first child element */
	}
	.main-navigation ul ul ul {
		left: -999em;
		top: 0;
	}
	.main-navigation ul ul ul::before {
		border-color: transparent #11100f transparent transparent;
		border-width: 7px 7px 7px 0;
		left: -5px;
		position: absolute;
		top: 15px;
	}
	.main-navigation ul ul ul::after {
		height: 100%;
		left: -15px;
		top: 0;
		width: 20px;
	}
	.main-navigation li:hover > ul {
		left: auto;
	}
	.main-navigation ul ul li:hover > ul {
		left: 103%;
		left: calc(100% + 5px);
	}
	.main-navigation #primary-menu > li:nth-last-child(1):hover > ul,
	.main-navigation #primary-menu > li:nth-last-child(2):hover > ul {
		left: auto;
		right: 5%;
	}
	.main-navigation #primary-menu > li:nth-last-child(1):hover ul::before,
	.main-navigation #primary-menu > li:nth-last-child(2):hover ul::before {
		left: auto;
		right: 15px;
	}
	.main-navigation #primary-menu > li:nth-last-child(1) li:hover ul,
	.main-navigation #primary-menu > li:nth-last-child(2) li:hover ul {
		left: auto;
		right: 103%;
		right: calc(100% + 5px);
	}
	.main-navigation #primary-menu > li:nth-last-child(1) li:hover ul::before,
	.main-navigation #primary-menu > li:nth-last-child(2) li:hover ul::before {
		left: auto;
		right: -8px;
	}
	.main-navigation #primary-menu > li:nth-last-child(1) li:hover ul::after,
	.main-navigation #primary-menu > li:nth-last-child(2) li:hover ul::after {
		left: auto;
		right: -15px;
	}
	/* Sticky menu */
	.sticky {
		bottom: auto;
		position: fixed;
		top: 0;
	}
}

    I’ve seen plugins and JS code that claim to make it happen, but since that behavior is already present on the full-size display, I figure it has to be something that’s simply not included (or is excluded) in the mobile menu code. Any ideas?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    bcabra · Member ·

    Sorry, I see this exact question was already answered here, but I wasn’t able to find it before: https://en.forums.wordpress.com/topic/pique-please-make-menu-fixed-on-mobile-while-scrolling

    Strangely, the sticky menu CSS was the solution, but didn’t work when I edited the template CSS, only when I added it to my custom CSS.

    Oh well, problem solved!

  • The topic ‘Making menu move as page scrolls on mobile’ is closed to new replies.