[Resolved] Customize Mobile Header

[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

[Leo]

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

[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

[Leo]

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! 🙂

[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.

[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!

[Leo]

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.

[Tomas]

Hey Leo,

1 & 2. Disabled Mobile Header

This is what it looks like now:
https://imgur.com/GnovTO4

This is what I’m trying to achieve:
https://imgur.com/WnRar9n

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

4.I’ll look into it.

Thanks!

[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…

[Leo]

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.

[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

[Leo]

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.

[Tomas]

Perfect! Thanks!

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

I;m gonna mark this as solved now.

THANK YOU

[Leo]

You’re very welcome 🙂

[Author]

Posts