Site logo

Archived topic

Turn "Hamburger" Mobile Menu off

33 replies · Started by Richard on June 18, 2018

Viewing posts 16–30 of 34

I couldn't help to try it right away. Unfortunately, this didn't help either.

Mobile Header is turned off.

Sticky is turned on, but is not showing for some reason (after this last change).

Primary nav is float right.

Have new function in Snippets and activated and added the CSS you supplied.

Removed this CSS (don't see the sense of it):

/* Landscape tablet and below */
@media (max-width: 1024px) {
	.inside-footer-widgets > div {
		margin-bottom: 50px;
	}
	
	.active-footer-widgets-1 .footer-widget-1,
	.active-footer-widgets-3 .footer-widget-3,
	.active-footer-widgets-5 .footer-widget-5 {
		width: 100%;
	}
}

/* Portrait tablet and below */
@media (max-width: 768px) {
	.sidebar,
	.content-area {
		float: none;
		width: 100%;
	}
	
	

	.site-main {
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}
	.fluid-header .inside-header {
		text-align: center;
	}
	
	.header-widget {
		float: none;
		max-width: 100%;
		text-align: center;
	}

	.navigation-search,
	.navigation-search input {
		width: 100%;
		max-width: 100%;
	}

	.main-navigation li.search-item {
		z-index: 19;
	}

	.main-navigation li.search-item .fa-times {
		text-indent: -9999px;
	}
	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}
	.main-navigation li.search-item.current-menu-item {
		position: relative !important;
		right: auto;
	}
	
	.post-image-aligned-left .post-image,
	.post-image-aligned-right .post-image {
		float: none;
		margin: 2em 0;
		text-align: center;
	}
	
	.site-info {
		padding-left: 10px;
		padding-right: 10px;
	}
}

I re-added the above CSS (I'm sure we put it in for some reason :) ), but our sticky header disappeared as well as our icons (this doesn't have to do with the CSS). I assigned an empty menu to the primary menu.

odd, i can't see the markup that the snippet should of added. I just tested the code on a clean install. And it works. Can't see why it wouldn't here. Thought it may of being tap tap but thats hooked into the footer.

In that snippet can you try changing the generate_inside_navigation for generate_inside_container so we can tell if its the code or something odd with the nav.

I don't see a generate_inside_navigation, only a function db_inside_navigation_html() { ?>

oh! I forgot the first line of the snippet! Duh!

Ok, so got that work somewhat. Removed the letters A,B,C,D you had. But the sticky header is now reduced in height no matter what I have under Sticky Nav Menu Item Height, and it's too far to the right.

Sticky Nav doesn't work on Mobile.

So all the elements are in place. Do you have sticky enabled for mobile and desktop?
Just need some CSS, do you need a hand with that? (is this a good solution!)

Yes! Have a look! :) I think we can live with this. Except the icons are too far to the right which I haven't figured out and originally, the client wanted the logo to be in the sticky header.

Oh yeah getting there. You can add the logo to the navigation. So it would be there throughout. Would just need a bit of positioning.
You can target the .social-icon-wrap to put some space around the icons to get them off the edge as well as control the minimum height of the nav bar.

.main-navigation .navigation-logo img {

smack in the middle of the header? :)
}

And then we are set!

(I turned nav logo on and chose only on Sticky)

Did you publish those changes (clear caches)? Not seeing them yet.

Sorry! Now. (I owe you a drink or two.)

Thank you, David. Think I am off to bed! If we could get the logo in the middle on sticky, that would be great! I already displayed it none at 400px, because I think it will get a little crowded around there. Thanks again!

This archived topic is closed to new replies.