Sign in

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2518
    luxon

    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?

    mene_example

    With best regards,

    Luka

    #2584
    Verhoeckx

    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

    #2590
    luxon

    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 */
    }

     

    green_banner

    Br,

    Luka

    #2595
    Verhoeckx

    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

    #2615
    luxon

    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

    #2624
    Verhoeckx

    Great that it worked 🙂 !

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.