Sticky Menu Logo

Hi there,

So far I’ve been using a plugin to create a sticky menu on my site, as I just want the nav menu to stick at the top of the screen, not the logo too. However this is creating some errors on my site so I would rather use your built in software.

So, is there a way I can make just the menu sticky, or is there a way to make the logo smaller upon scrolling? As otherwise the logo & menu takes up half the screen!

Thanks in advance for any help,

Will.

Sorry for the unrelated post, but i’ve just realised that my site has developed an error on this page: http://www.lowdengardencentre.com/new-website/the-restaurant
The error says: gprofiles.js?ver=2016Sepaa:1 Uncaught TypeError: jQuery(…).on is not a function

Any ideas what could be causing it?

Thanks a lot,

Will.

Hello there,

I visited your site. It seems like you have been able to make the logo to become smaller upon scrolling. Please let us know if you still need an assistance.

> The error says: gprofiles.js?ver=2016Sepaa:1 Uncaught TypeError: jQuery(…).on is not a function

The issue doesn’t show up for me. Have you been able to resolve it by yourself? Please confirm.

Regards,
Kharis

Hi there,

Yes I’ve managed to make the logo smaller using some advice from an earlier thread, but would prefer just the menu to stick rather than the logo too if that’s possible.

Yes, sorry about that. It was a problem being caused by a restaurant booking widget, something wasn’t right with the code for it.

Kind regards,

Will.

Yes, it is possible.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:1025px){
  .site-header.float-header .header-wrap .col-md-4{
    display: none;
  }  
}

Regards,
Kharis

Hi Kharis,

Thats perfect thank you so much. The support on this theme is incredible.
One further question, when you make the screen gradually smaller, there is about a 10px window that shows how I would like the mobile menu to be, however it then jumps to the standard mobile menu which a dark grey background behind the logo. Is it possible to make the mobile menu shortcut sticky, and make the header the same as the desktop header? Sorry if this is confusing, I’ll try and add some screenshots to help.

Kind regards,

Will.

Dear Will,

I am curious if the following CSS code would meet your need.


@media only screen and (max-width:1024px){
  
  .site-header.fixed {
    position: fixed !important;
  }
  
}

Regards,
Kharis

Hi Kharis,

That’s worked perfectly in sticking the menu to the top of the screen on mobile, thanks a lot. However I was also wondering whether it was possible to make the header area behave the same way as it does when on a desktop. Currently when on mobile, the logo and menu icon sit on a grey background when on mobile, with the header photo below - is it possible to remove that so that the logo and menu icon sit on the header photo as they do when viewing the site on desktop?

Thanks so much for your help - the support on this theme really is great!

Kind regards,

Will.

Dear Will,

Please try the solution posted on this thread. Let me know how it works for you.

Regards,
Kharis

Hi Kharis,

That’s great thanks so much! One final tiny little bit, the menu icon no longer has a background when you scroll, making it really hard to see on some backgrounds on the page. Sorry for being such a novice at this, it’s the first website i’ve made!

Kind regards,

Will.

Dear Will,

Please share the link to your site, so I can take a closer look.

Regards,
Kharis

Hi Kharis,

Its:
http://www.lowdengardencentre.com/new-website/

Thanks so much for your help!

Kind regards,

Will.

Dear Will,

I would like to apologize in advance for the delay. I missed your reply somehow.

Try adding this CSS code:


.btn-menu:before{
  background: #000;
  padding-left: 10px;
  padding-right: 10px;
}

Doesn’t it work for you?

Regards,
Kharis