Sticky Menu & Page Title

Hello!

We just switched our site to Sydney Pro, and so far we love it! Though, we do have a few gripes and issues.

Our site is here: http://blazianentertainment.com/

1.) On our site, the only time where the menu bar/ nav bar is sticky is when there is a header image via the customize menu. The only page that we set that to is our home page as we plan on having different header images on different pages. How can we make the menu sticky on all of our pages?

2.) We don’t want to have page titles appear on our pages. How can we hide all of our page titles?
I’ve tried adding .title-post { display: none; } to the custom css file, but to no avail.

Any help would be much appreciated. Thank you!

Hello there,

Thank you for asking.

> 1

I noticed it has already been sticky on all pages. Have you managed to resolve it by yourself?

> 2

Try the following CSS code

.page .entry-header{
  display: none;
  visibility: hidden;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi,

I have the same issue (#1):

I need the header to be sticky on every page.

The only page this is workinng is the home page, where I have the slider activated.

I would like the menu to be sticky on every page and blog post, even if the header slider isn’t activated.

Thanks for your help!

Dear Steven,

Thank you for reporting.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin?

.site-header.fixed {
    position: fixed !important;
}

.site-header.float-header{
    padding: 5px !important;
}

.admin-bar .site-header.float-header {
    top: 32px !important;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis.

Awesome, thank you very much for the extremely quick solution!
Works perfectly!

I had found a way to almost fix it myself, use myStickyMenu plugin, only it broke the background color of the header.

Works just great with your solution, so thanks again!

well this work perfectly… but there is a problem im facing…
when im scrolling upward again… the padding between menu bar and the top row, seems very less…(comparing to the default)
Is there anything we can do to restore the floting windows setting(basically padding) to its prior setting… as it reach top of the page.!

Hello @pravesh2401,

Could you please share your site’s URL here so I can have a closer look?

Regards,
Kharis

site is still in progress…

other then Homepage… padding of every page gets shorter

Bellow is the link

Thankx for the quick responce.

web-address

Hello @pravesh2401,

Thank you for sharing your site address. I am looking into it. I will update you ASAP. Please be patience.

Regards,
Kharis

Hello @pravesh2401,

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

.page .page-wrap{
  margin-top: 68px;
}

Regards,
Kharis

that works perfectly…
thanx a ton…

u r the best team.

Hi Kharis !

Sorry to dig up this thread but it’s related !

I had the same problem, so I tried your solutions and now my nav menu is sticky on all pages. But.

As you can see here the actual page goes up in the menu…

I tried the

.page .page-wrap{
  margin-top: 68px;
}

but it left a kind of margin on top of every pages, home page included.

The wierdest thing is when Im logged as admin, the problem just disappear. The menu goes between the admin menu and the page, even if I scroll down then up to the top …

Do you have any idea on how to fix this problem ?

Thank you !

Hello Max,

Try adding the below custom CSS code:


@media only screen and (min-width:992px) and (max-width:1024px){
  
  body:not(.home) .page-wrap{
    margin-top: 165px !important;
  }
  
}

@media only screen and (min-width:1025px){
  
  body:not(.home) .page-wrap{
    margin-top: 167px !important;
  }  
  
}

Regards,
Kharis

Hello Kharis !

Thank you for answering so quickly =)

I added your code and it’s almost perfect, but if you clear your cache, when you load a page the white margin stays on top of the page till the kind of banner gets loaded, then it’s perfect !

You can try this and tell me if we can make something to avoid that.

I noticed that if we scroll down the problem’s no longer here even if the images are still loading, maybe we can tell the CSS to go down 1px to simulate that ?

Anyway, we’re amazing ! Thank you !

> but if you clear your cache, when you load a page the white margin stays on top of the page till the kind of banner gets loaded, then it’s perfect !

Try adding this code:


@media only screen and (min-width:992px) {

  .site-header {
    position: fixed !important;
  }  
  
}  

Let me know how it goes.

Regards,
Kharis

Hi Kharis !

Happy New Year ! :slight_smile:

Thank you for your help, everything is working perfectly now !! =D
And sorry for the delay !

Thank you again, and see you !!

Hello Max,

Happy New Year! :slight_smile:

Never mind. Just go easy on it.

Please feel free to open a new topic if you need anything else.

Regards,
Kharis