Responsive Menu Position

Illdy
1

Hello,

I’d just like to start by saying how great this theme is!
I’m having a problem with the responsive hamburger menu though. I’m not sure what has caused this as I haven’t changed any of the navigation/header CSS.

When the window size is < 768px (a Bootstrap breakpoint), the horizontal lines do not appear to be inline with the logo.

This is the actual HTML which is displayed


<div class="container">
	<div class="row">
		<div class="col-sm-2">
			<a href="#" class="custom-logo-link" rel="home" itemprop="url"><img width="153" height="75" src="#/wp-content/uploads/2016/06/header-logo.png?fit=153%2C75" class="custom-logo" alt="header-logo" itemprop="logo" srcset="#/wp-content/uploads/2016/06/header-logo.png?w=153 153w, #/wp-content/uploads/2016/06/header-logo.png?resize=150%2C75 150w" sizes="(max-width: 153px) 100vw, 153px" /></a>
		</div><!--/.col-sm-2-->
		<div class="col-sm-10">
			<nav class="header-navigation">
				<ul class="clearfix">
					<li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active"><a href="#/#"><span>Home</span></a></li>
					<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active"><a href="#/#about"><span>About</span></a></li>
					<li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active"><a href="#/#projects"><span>Projects</span></a></li>
				</ul><!--/.clearfix-->
			</nav><!--/.header-navigation-->
			<button class="open-responsive-menu"><i class="fa fa-bars"></i></button>
		</div><!--/.col-sm-10-->
	</div><!--/.row-->
</div><!--/.container-->

(I’ve removed my URL for privacy purposes)

Thanks,
Jake

2

Hello Jake,

Please provide the website link via a private message, I cannot seem to replicate this behaviour.

Thank you!

3

Hello,

The URL is http://www.turnerwebdesign.co.uk

Thanks,
Jake

4

Hello,

Quite a strange issue…will continue the investigation.

Meanwhile try using this CSS fix:

@media only screen and (max-width: 768px){
.open-responsive-menu {
    position: relative;
    top: -70px;
}}

Let me know if it did the trick.

Regards

5

Hi,

That seems to work nicely thanks!
The only minor issue (which I can live with) is when you open the hamburger menu and resize the page to be bigger again (so the normal navigation is displayed).

Other than that, it’s perfect!

Cheers,
Jake

6

Hello Jake,

This issue would only appear in this particular case and no end user will ever experience this.

You should be able to fix this, however, with this code:

@media only screen and (min-width: 992px)
.responsive-menu.active {
    display: none !important;
}

Regards

7

hi

Thanks for sharing code. I have same problems and solve it step by step by your suggestions.

Very Nice

ian

8

Hello Ian,

Glad that you got it working with the above code.

Regards