Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Customize Mobile Header

Home Forums Support Customize Mobile Header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #389527
    Tomas

    Hello,

    I’m starting a new topic because what I need is very specific.
    It’s a few things I want to customize.
    Instead of going through every part I photoshopped a picture of how I want my mobile header to look like.

    This is what it looks like now:

    View post on imgur.com

    This is how I want it to look like:

    View post on imgur.com

    This is the link to my site (ignore homepage, it has a different header):
    http://www.simpletravelblog.com

    The changes are:
    1. Background image shows full size
    2. Logo centered over the image
    3. Menu icon bigger and to the left
    4. Social icons shown to the right (I would like these to show on the sticky header too)

    I know it’s a lot but every time I manage to fix one of these changes I mess up another one. So I wanted to talk with the experts and do it the way it’s supposed to.

    Many Thanks!
    Tomas

    GP Premium 1.4.3
    #389556
    Leo
    Staff
    Customer Support

    Hi there,

    1. Since you are using Elementor, this would have to configured within the plugin.
    2. Same as #1
    3. Try this CSS:

    button.menu-toggle {
        text-align: left;
        padding-left: 20px;
        font-size: 20px;
    }

    4. This should help: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

    #389605
    Tomas

    Hey Leo,
    Thanks for the quick reply

    1 & 2. Yes, I’m using elementor, but the header was made with the header plugin for generatepress, and set to all pages and post with the global settings option (except for the home).

    3. Perfect! It’s on the left now. I added a little padding to it’s left. Is it possible to make it a little bigger?

    4. I’m sorry, I’m pretty new to wordpress and don’t fully understand this. Should I copy this code to Simple CSS?

    add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
    function tu_mobile_header_html() { ?>

    Your mobile header HTML in here

    <?php }

    Or this one?

    .mobile-header-content {
    float: right; /* etc.. */
    }

    PS:
    UNDER THE “Adding HTML Inside the Mobile Header” TITLE, THE SENTENCE:
    This requires you to add a function will will hook your content into the mobile header area.
    HAS THE WORD “WILL” TWO TIMES.

    Thanks,
    Tomas

    #389646
    Leo
    Staff
    Customer Support

    1 & 2 The header is created using GP but the page header with background image and logo are created using Elementor.
    You can see GP has no control here: https://s26.postimg.org/t664m1he1/elementorpageheader.png

    3. Adjusted CSS above: https://generatepress.com/forums/topic/customize-mobile-header/#post-389556

    4. Please see the articles “Learn how to add…” below each block of code.
    Thanks for the catch! 🙂

    #389660
    Tomas

    1 & 2. I know but that’s only the homepage, I was talking about every other page and post. Sorry if I wasn’t clear, the homepage is the only exception. I need to do this for the the other pages and posts (where the headers are made with generatepress) .

    3. SOLVED. Thanks!!!!

    4. I’ll look into it.

    #389669
    Tomas

    4. All right, I’ve been reading about this. It seems too much for my current wordpress abilities, it talks about being careful because it might crash the site. I don’t wanna go there.
    Is there maybe any other easier more beginner way to do this? I read something about Lightweight Social Icons. Is it possible to do it with this plugin?
    If there is no other way I just gonna leave this one out for now. But it would be great if an easy way to do this was implemented in future Generatepress updates. It looks great and it’s a great way to direct visitors to your social media.

    Thanks!

    #389723
    Leo
    Staff
    Customer Support

    1 & 2 I see. The current logo is not showing because you are actually using the mobile header feature without uploading a mobile header logo: https://docs.generatepress.com/article/mobile-header/

    I would think the best solution for your case would be to disable mobile header and just use the normal header. As the mobile header logo should be something small like an icon. Feel free to try it yourself and see the result.

    4. If you use Code Snippets then it wouldn’t crash your site: https://docs.generatepress.com/article/adding-php/#code-snippets
    This is pretty easy already. All you have to do is to take the code and add in your own html, so we would use built in fontawesome in this case, so something like this:
    <a href="your link here"> <i class="fa fa-facebook-square fa-4x"></i></a>

    The CSS part should be copy and paste directly.

    This hasn’t been requested very often and users are all satisfied with the current solution.

    Let me know if you would like to give it another shot.

    #390259
    Tomas

    Hey Leo,

    1 & 2. Disabled Mobile Header

    This is what it looks like now:

    View post on imgur.com

    This is what I’m trying to achieve:

    View post on imgur.com

    So the changes I would need now are:
    1. Background image shows full size
    2. Bigger logo

    4.I’ll look into it.

    Thanks!

    #390261
    Tomas

    4. I added a snippet to Code Snippets with the following code:

    add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
    function tu_mobile_header_html() { ?>

    <i class=”fa fa-facebook-square fa-4x”></i>

    <?php }

    After that I went into Simple CSS and entered the following code:

    .mobile-header-content {
    float: right;
    }

    I guess that’s not what I was supposed to do cause it’s not working. I’m sorry I’m driving you crazy with this…

    #390306
    Leo
    Staff
    Customer Support

    1 & 2 That specific layout is not very easy as background images are not responsive by nature. You would have to
    – Replace the background image with one that fits with mobile specifically:

    @media (max-width: 768px) {
        .generate-content-header {
            background-image: url(http://MOBILE BACKGROUND URL HERE);
        }
    }

    Then add in a desired size logo. You can use this method to hide/show: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    An easier option would be to try adding a logo in Customizer > Site Identity. It will show up at the top (people don’t usually add logo in page header)

    4. You are missing this in the function: <div class="mobile-header-content">. You only want to replace Your mobile header HTML in here in that code.

    #390331
    Tomas

    1.2 I managed to solve it! I entered the following css in Simple CSS:

    @media (max-width: 768px) {
        .generate-content-header {
            background-image: http://www.simpletravelblog.com/wp-content/uploads/2017/06/este.jpgE;
    padding-bottom: 40%;
        }
    }
    
    @media (max-width: 768px) {
    .site-logo {
    width: 60%;
    height: auto;
    margin-top: 5%;
    }
    }

    I had to add bottom padding so the background image was displayed in its full size,
    BUT this messed up my mobile homepage:
    http://www.simpletravelblog.com

    I guess there must but a pretty ease way to solve this, right? maybe add an exeption to the homepage on the CSS?

    4. All right, this is what my snippet looks like:

    add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
    function tu_mobile_header_html() { ?>
        <div class="mobile-header-content">
            <a href="https://www.facebook.com/SimpleTravelBlog/" /> <i class="fa fa-facebook-square fa-4x"></i></a>
        </div>
    <?php }

    Is there anything wrong/missing? because its not working

    #390607
    Leo
    Staff
    Customer Support

    1 & 2 Try this to exclude home page:

    @media (max-width: 768px) {
        body:not(.home) .generate-content-header {
            background-image: http://www.simpletravelblog.com/wp-content/uploads/2017/06/este.jpgE;
            padding-bottom: 40%;
        }
    }

    4. Mobile header is disabled. Try enabling it again.

    #390692
    Tomas

    Perfect! Thanks!

    Thanks you for your patience Leo. You were very helpful!

    I;m gonna mark this as solved now.

    THANK YOU

    #390697
    Leo
    Staff
    Customer Support

    You’re very welcome 🙂

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