romburd

Hi @rfortin I have added your css code to make the menubar sticky on mobile view and it worked.
Now I want to implement the jquery solution for closing the menu automatically after clicking the link but I am not familiar with how and where to add .js file for this.

Could you please guide me through this?

update: After Moving the logo,site title and tagline to the menubar-the menu and skip to content do not work and become unresponsive on the front page.
In case any one is making similar changes and facing same issues please update.

That’s fair!
But thank you so very much for all the help uptil now! It really gave me a lot of solutions.
You are a genius in coding!Have a great day! ??

ok!..but is it possible to not move the tagline and site title on menubar? Is it the way to bring it back to it’s position where it was earlier?

Wow! Genius!
It worked perfectly! Thanks so much for this!
But the logo does not move with the sticky naviagtion.

And it also moved the Site title and tagline on the menubar.Which was not intended!
Also can menubar be displayed in the same way on mobile version?

Yes, there is!
I think it is from the code which I had added earlier in order to fix the header image on mobile version.
The code Which I also posted here while explaining the problem in the comment above.

Here it is:
https://tecfinds.com/

If you Scroll a little bit and you will be able to see it on the header image along with Site Title and tagline.

I want to move it from current position to the menubar on the left of menus.
Example page about How It should look after changing position is:
https://designschool.canva.com/blog/design-a-pitch-deck-that-makes-investors-say-yes/

It did not solve the problem.

The space on the right side of the homepage is still there.

By logo I mean that the logo option in the customiser. I am talking about it’s placement. If we move it on the menubar on desktop version. Where it will go on mobile version?

Thanks it worked! But there is still space a tiny bit.

Thankyou it worked!
But on mobile site the front page still shows gap underneath the header image.
I fixed header with the code you had given in another thread. The problem was solved but the space below the header and on the right side of the homepage still remains on mobile version.

Can you please look into that?

Here’s the code I used:
@media screen and (max-width: 480px) {
.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header { height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.custom-header-media,
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: static;
}

.custom-header-media:before {
background: none;
}

body.has-header-image .site-description,
body.has-header-video .site-description {
color: #222;
opacity: 1;
}

.site-branding .wrap {
padding: 0 1em;
}
}

The problem was solved for the posts but on pages there is still that gray bar.
How can I get rid off that gray bar from pages.
Here is the example page link:
https://tecfinds.com/a-sample-page/

I want to have it on the desktop site.
On the mobile site I am unsure if it is possible? Since header image takes place first and then menu is next.
Can you suggest the logo position in mobile site?

Yes, I can.
Here is the page.I just want to put the logo like on this page.
https://designschool.canva.com/blog/design-a-pitch-deck-that-makes-investors-say-yes/