[Resolved] Page header don’t work on front page

Home Forums Support [Resolved] Page header don’t work on front page

Home Forums Support Page header don’t work on front page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #702090
    Signe

    Hi

    I am new to building websites and GeneratePress. Hope you can help. I have tried to find answers in the support forum but failed.
    1: My page header made with Elements doesn’t work on my assigned front page but works on all other pages?
    2: The phone icon in the top bar only show up on one page but not on the others?
    3: I can’t disable the top bar on mobile have tried to enter this CSS:


    @media
    (max-width: 768px) {
    .top-bar {
    display: none;
    }
    }

    It doesn’t work.

    I tried the advice in Debugging Tips and the following massage came up:
    Elementor Debugger: Theme: Template File: No Templates for condition > GeneratePress – page.php
    As I am new I don’t understand the meaning. Sorry.

    Hope you can help.

    Thank you for a fantastic support forum

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #702102
    David
    Staff
    Customer Support

    Hi there,

    1. Which display rule have you used for the Front Page? There is a specific Display Rule: Front Page that is required.

    2. The FontAwesome icon is being loaded by Elementor, so will only appear if there is Elementor content on that page. Test it by adding some Elementor content to the page. If thats the case then you can either add some Element global content to say the footer as a widget for example or we can add FA using an alternative plugin.

    3. In your CSS you have this first: @media (min-width: 769px) { this needs another } closing bracket after that rule, this is breaking all CSS media queries that comes after that.

    #702117
    Signe

    Sorry my page header is working now.
    The other issues are not resolved.
    And one more thing: How can I change the size of my logo on mobile?

    #702125
    David
    Staff
    Customer Support

    Glad to hear that. Looks like you still need to fix that CSS error.
    This media query will allow you to target the mobile logo, just change the height accordingly:

    @media (max-width: 768px) {
        .main-navigation .site-logo.navigation-logo img {
            height: 43px;
        }
    }
    #702131
    Signe

    Hi David

    Thank you for fast reply.

    1. I found the specific Display Rule: Front Page and it is working. Thank you.

    2. I added content with Elementor and the icon is showing. How come it is only showing with content in Elementor?

    3. Can you show how the CSS must be written in total? As I tried adding a } after @media (min-width: 769px) { and disabled the top bar all together.

    And the last issue?
    How can I change the size of my logo on mobile? Tried adding the CSS but it didn’t work?

    Thank you

    #702161
    David
    Staff
    Customer Support

    1. Thats great.
    2. GP doesn’t add FontAwesome anymore as it is really heavy, whereas Elementor does but it will only load the icons on pages where it is being used.
    3. Cut out your existing CSS ( put it somewhere safe just in case ) and add the code i provide here:

    https://gist.github.com/652d55778229a92a0ec436ebcaedd66d

    You will see i added a comment where i put the extra } bracket in place. Just check that all the CSS rules before that should be there 🙂

    #702293
    Signe

    Hi David

    Thank you so much.

    It works.

    Thank you for fantastic support.

    #702297
    David
    Staff
    Customer Support

    Awesome. Glad to be of help

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