Removing header buttons

Hi, thank you for the amazing theme.

I will like to know how to remove the header buttons.
I have applied the following css to my custom css:

.header-button {
display: none;
}
.header-text {
width: 100%;
position: absolute;
}
.header-text {
top: 60px;
}

this css worked for the web page view, however, it doest not work for tablet and mobile view…

please help me out here, thank you so much!
I really appreciate it!

Hello there,

This code:


.header-button {
  display: none;
}

should work removing the header button across devices.

Please try to clear your mobile web browser’s cache then reload your site.

If your site is being cached by a plugin like W3 Total Cache, please empty all cache and try again.

Regards,
Kharis

Hi,
Thank you for the quick reply.

However, the problem was not solved.

I have clear all the cache on my mobile device browser, both chrome and safari, and still the header button is there.
When I restore down my webpage (into smaller size) the buttons will still show…

Please help me out here, thank you!

Hello there,

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

Regards,
Kharis

this is my website

Thank you for the time and reply

Hello there,

Thank you for sharing the link.

Please try this code:


.header-button {
  display: none !important;
}

Regards,
Kharis

Hi,

Thank you for the quick response…but it is still not working.
Please help!

Thank you so much

Hello there,

Please be sure that the group of custom CSS code you applied is error free. You can examine it using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

Regards,
Kharis

Hi,
I have just used the link you provided to test out the css in my custom css file, and the css code has no error found, it is a correct and usable code.

Would there be anything wrong? all the codes in my custom css work on all devices, but not the header buttons and the header text position.

Would it help if I move the code to somewhere else?

thanks

Hello there,

Try to move the code into the child theme’s style.css. Put it after this line:


@import url("../perth/style.css");

Let me know how it goes.

Regards,
Kharis

I think it is getting worst…
I find that sometimes the child theme doesn’t work as it should be.
the same code in child theme is not working anything(sometimes), but when I place it on the custom css, it worked.
That’s why I move all my codes to custom css instead of the child theme. The custom css seems to load before child theme?!

As a result, by moving the code back to my child theme after the import url, still doesn’t work. Even worst is that on now the buttons are displaying on the web page view.

Every code that I place in the custom css work for all devices, I don’t understand why not this code…

Hi,
I have moved the code to the very top of the custom css, and that work!!! finally!
Thank you so much for the help

I have another request, how do I adjust the header text accordingly to different devices view?
as you can see from my site, the header text now is on the book cover, but with the mobile view, the header text will move up and block the eyes of the girl, which I will like to change that.

how can I achieve to force the header text to stay on the book cover on all sizes of view?

thanks!

Hello there,

It sounds great that you have been able to resolve it.

To move down the main header text on smaller screen, try adding the following CSS code:


@media only screen and (max-width:460px){
  
  .header-info {
    top: 30%;
  }
  
}

Regards,
Kharis

Thank you !
This works amazingly!

I have a small issue, my site is in simplified chinese.
there is no simplified chinese in google font yet, but the early access does.
this is what google have on the early access website:

Link
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
Example
font-family: ‘Noto Sans SC’, sans-serif;

they didn’t provide the “standard” embed bode, how should I put this in the customize area?
I understand the font family field, but I dont know how to fill out “Font name/style/sets”

Thank you again for replying my non-stop questions.

Hello there,

It can be done by adding the following code into your child theme’s style.css:


@import url('http://fonts.googleapis.com/earlyaccess/notosanssc.css');

body, h1, h2, h3, h4, h5, h6{
   font-family: ‘Noto Sans SC’, sans-serif;
}


Regards,
Kharis

thanks so much!
and sorry for the late reply, was working on other stuffs and forget to give a reply.

No worries. Just go easy on it.

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