Sydney, reposition the website slider and title below the header

In preview while i’m logged in the appearance is proper.

Once I logout of wordpress -

here the image just below menu is suppressed. Probably repositioned below overlapping header. Same goes with pages also… Title is hidden after logging out. Can you please help?

Hello there,

Try adding the following custom CSS code:


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

You can do it through Appearance > Customize > Additional CSS.

Regards,
Kharis

Hi, this helped! however, with this the sticky nature of menu is now gone.
After going through your posts I had added this CSS code to restore sticky menu for website without header image.
.site-header.fixed {
position: fixed;
background-color: white;
padding: 7px;
height: 110x;
}

Now if I add the above code this will not work. Is there any way to retain this as well?

Thanks in advance!
Divya

Hello Divya,

Try adding this code:


@media only screen and (min-width:992px){
  
  #masthead.site-header.fixed{
    position: fixed !important;
  }
  .site{
    margin-top: 106px;
  }
  
}

Just for information, there is a new version of Sydney (1.34). We’d suggest you to upgrade, so you’ll get the latest feature. See the changelog here https://athemes.com/changelog/sydney/

Regards,
Kharis

Thanks much!

It works well.

You’re welcome.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Now the Mobile Menu is gone, it’s not visible. Is this because of the above code? Could you please check.

Tried the solution posted here: https://athemes.com/forums/topic/mobile-menu-hidden-by-slider/
No luck.

Hello there,

I don’t think it relates with some CSS code I suggested. What will happen if you add this code?


@media only screen and (max-width:767px){
  
  .site-header .col-md-8{
    margin-bottom: 20px;
  }
  
}

Regards,
Kharis

I tried adding that code, nothing changed. Is there anything else we can try?

.site-header.fixed {
position: fixed;
background-color: white;
padding: 0px;
height: 140px;
}

Increased height of header only for Mobile site. It worked. Not sure if that’s the correct way of doing it. For Desktop it is set to 93px;

Thank you Kharis for all your help. You can mark this thread resolved. Best Themes and support offered from your team. Extremely Happy with the products and support.

Hello there,

Great! You figured it out. But it seems like the mobile menu button isn’t fully visible on smaller screen. You might need to add the below CSS code:


@media only screen and (max-width:767px){

  .btn-menu{
    margin-top: -10px;

  }

  #mainnav-mobi{
    top: 30px !important;
  }
  
}

I am marking this thread as resolved. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here:https://wordpress.org/support/view/theme-reviews/sydney#postform? We would highly appreciate it if you do so.

Regards,
Kharis