OnlyMobile site Tittle Color Change and add a Floating Header with Color -Sydney

Hi,

Sydney is an awesome theme and it makes my website even better.
But with the mobile view, I have some queries.
I have applied this CSS code to change the background color to transparent and the floating header is also working with transparent color. [NOTE: I got the code from one of the discussions in the forum but only modification is the Transparent color]

@media only screen and (min-width:992px){
  
  .btn-menu{
    margin-top: -25px;
  }
  
  .site-header .col-md-8{
    margin-top: -10px; 
  } 
  
}

@media only screen and (max-width:991px){
  
  #masthead.site-header{
    background-color: transparent !important;
    height: 83px !important;
    padding: 5px 0 !important;
  } 
  
  #masthead.site-header.float-header{
    height: 53px !important;
    padding: 10px 0 !important;
    background-color: rgba(0,19,79,0.9);
  }
  
  #masthead.site-header.fixed {
    position: fixed !important;
  } 
 
  .site-header .col-md-8{
    width: 100%;
    margin-top: -25px;
  }  
  
}

@media only screen and (max-width:767px){
  
  .site-header{
    height: 70px;
  }
  
  .header-wrap{
    text-align: left;
  }
  
  .btn-menu{
    margin-right: 15px;
    margin-bottom: 30px;
    margin-top: -10px;
    color: #D3D3D3;
  }
  
}

I just want to change the title color and floating header color only mobile to #D3D3D3.
Can you help me out with that? You can check my website here: http://samsphotography.ml (Please view in Mobile)

Hello @sam1ceagain,

Can you please provide some explanatory screenshots in order to illustrate what exactly you want to achieve?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).

Kind Regards, Roman.

Hi Roman,

Something like this

Sam

Hello Sam,

Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

.site-title a,
.site-description,
.btn-menu,
#mainnav ul li a {
    color: #D3D3D3 !important;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

I have tried the code you provided but floating header is still transparent. And I have another issue. If I go to another page say like the about page and click on the tittle, it doesn’t bring me to the home page. Nothing happens.

Please help me out.

Thanks
Sam

Hello Sam,

  1. In the custom CSS code that you mentioned in your firt post of this topic please remove !important from background-color: transparent !important; and modify background-color: rgba(0,19,79,0.9); accordingly to your needs.

  2. Please create a new topic for your second issue in order to make it easier to help you.

Kind Regards, Roman.

Hi Roman,

Thanks for the information.
But the issue is, I just want to change the tittle Color for mobile version only. Not the desktop one.

I have tried the code you provided before but it changes the color of desktop tittle. I want the desktop tittle Color to be white and the mobile version tittle Color to be gray.

Please help,
Sam

Hello Sam,

It looks like this issue requires your custom CSS code reworking, this goes beyond our support policy. It’s considered advanced customization. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

Hi Roman,

Thanks for the feedback.
I appreciate your time,
Sam

You are welcome Sam,

Kind Regards, Roman.