We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

How to disable showing page title (heading) from the hero/navbar section?

April 19, 2020 at 2:08 pm #2518

[anonymous]

Hello,

I am new to Publii and so far I really like it. I am using “Simple (v.2.1.0.0)” theme for a really minimalistic presentation page (my first project with Publii).

I would like to remove showing page title from hero/navbar section, because it doesn’t show correctly in the mobile version or when browser screen is not in full screen mode – page title (heading) overlaps with the logo picture. I don’t want to expand height of hero section because navbar looks too big that way (I prefer to keep navbar section and menu buttons thin). I attached picture of the problem.

Basically I would like to show only logo picture on the left and navbar menu buttons on the right side of the page, without page titles, so that the logo/navbar can be thinner and will not overlap.

I don’t have any experience with editing of CSS code (I am building page in WYSIWYG approach). How can I disable showing this page title from normal and mobile version of the page theme?

With best regards,

Luka

April 29, 2020 at 11:02 am #2584

[anonymous]

Hello Luka,

I don’t exactly understand you problem but you could use the Developers Tools of your browser (F12) and pinpoint what exactly goes wrong. If you know what the problem is, you could add some CSS with the Custom CSS tool (Tools -> Custom CSS). You wrote that you don’t have any experience with CSS but maybe this is a good reason to learn it :-)?

Verhoeckx

April 30, 2020 at 9:29 am #2590
[anonymous]
Hello,

thank you for your reply.

I was able to solve the problem with theme replacement and now it looks ok 😉

I tried to use custom CSS tools to change some button colors. I want to change green “cookies pop-up” button to black. I tried to change this through “custom CSS tools” but without luck.

I understand basics of CSS but I don’t know how exactly should I enter this inside Publii custom CSS editor. Are there any examples on how to do this inside Publii? How should I address cookies pop-up button for example?
```
.button {
  background-color: #000000; /* Black */
}
```
Br,

Luka
April 30, 2020 at 2:16 pm #2595
[anonymous]
Hello Luka,

The CSS code looks good to me!

I have only two small remarks:
- When you add the declaration ‘background-color: #000000’ to the class ‘button’ all buttons on the website get a black background. If you only want to style the button in the cookies pop-up, use the element selector of the developer tools (F12) and try to find out which class is attached to the cookies pop-up button. Add the background color to that class.
- If the added CSS code doesn’t have any effect, try adding !important to the declaration.
Good luck!

Verhoeckx
May 2, 2020 at 9:27 am #2615
[anonymous]
Hello,

I was able to change all the colors that I wanted. I didn’t have to use “!important”.
```
.cookie-popup {
  background-color: #000000;
}

.cookie-popup__save {
  background-color: #D4A129;
}

.cookie-popup__save:hover {
  background-color: #D4A129;
}
```
Thank you very much for your help 🙂

Br,

Luka
May 4, 2020 at 11:06 am #2624

[anonymous]

Great that it worked 🙂 !