[Resolved] Adding phone and social media icons on mobile

[Jo]

Hi,

I’m really struggling with the layout of the mobile version. I need to condense the header and add the phone icon and social media icons (as showing in the desktop version).

You have previously suggested I use the mobile header feature:

https://docs.generatepress.com/article/mobile-header/

When I do this the logo goes too small and all I get is the small logo and the menu icon next to it.

I have tried to add the phone icon as per your suggestion:

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

I had no idea what I was doing here but I added the plug-in Code Snippets and I added the following code:

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

Your mobile header HTML in here

<?php }

I have no idea what to do next??

Thanks

Jo

[Leo]

Hi there,

You need to replace “Your mobile header HTML in here” to the desired content like FontAwesome icons, phone number or anything you want.

Search in generate_inside_mobile_header our forum to see lots of examples:
https://generatepress.com/forums/search/generate_inside_mobile_header/

[Jo]

Hi Leo,

I have searched the forum as per your suggestion. However I still don’t have the desired look on the mobile header. This is the current coding:

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

<i class=”fa fa-phone”></i>
<i class=”fa fa-facebook”></i>
<i class=”fa fa-twitter”></i>
<i class=”fa fa-linkedin”></i>

<?php }

1. I would like to have the navigation bar with no background colour, with the toggle menu in black

2. I would like to have the logo larger

3. I would like to have the phone icon on it’s own (on a separate line to the social media icons)

4. I would like the toggle menu to appear on the left hand side, the logo in the centre, the phone and social media icons on the right hand side.

5. I would like the icons to be larger and have space between them

If you can please help with this and then I will see how it looks.

Many thanks

Jo

[Tom]

Hi there,

I’m having trouble picturing exactly how you want it to look. Do you have any examples I can check out?

This CSS might get you closer:

.mobile-header-content {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    margin-right: 10px;
}

.mobile-header-content .fa {
    font-size: 25px;
    line-height: 60px;
    margin: 0 5px;
}

#mobile-header .site-logo {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-left: auto;
    margin-right: auto;
}

#mobile-header .menu-toggle {
    width: 120px !important;
    text-align: left;
    line-height: 60px;
}

[Jo]

Hi,

That’s still some way from what I’m wanting.

This site is kind of an example, although not exactly!

https://www.nbcsbookeepingservices.co.uk/

At the moment the background colour of the mobile header is black. I would like to have this white (as per the main body of the website). Which will mean the menu toggle will need to be black.

I would like the menu toggle to be left aligned, centrally to the logo.

I would like the logo to be in the centre and larger than it currently is (on mobile).

I’m not sure about the phone and social media icons. However I would like the phone icon to be away from the social media. How would it look if they were put below the logo with the phone icon (with ‘Call us’) to the left and the social media icons to the right? Or would it look better to just have the phone icon in the header and put the social media elsewhere?

Thanks

Jo

[Tom]

Try adding this as well:

#mobile-header {
    background: #fff;
}

#mobile-header .menu-toggle {
    color: #000;
}

#mobile-header .site-logo img {
    height: 100px;
}

#mobile-header .inside-navigation {
    align-items: center;
}

For the phone number, can you give the <a> element a class like phone-number? I may be able to tweak it a bit for you 🙂

[Jo]

Hi,

Background colour, menu toggle, size of logo – all great!

The depth of the mobile header is too deep. If you look on the mobile version home page, I want the header to be sized so you can see my head (although some may say it’s better not to see it lol). This gives the target for the sizing.

https://charnwoodbookkeeping.co.uk/wp/ – please look on mobile.

With that in mind we need to create less ‘white’ space. Out of interest, there is quite a lot of CSS for the mobile. If you add a new CSS does it supersede anything previous?

Can we move the logo to be along side the menu toggle – it will have to align right as there isn’t enough room to centre.

Below the logo can the social media icons (NOT phone) align to the right.

Keep the phone icon to the left. The phone number is 07903 329763.

Many thanks

Jo

[Tom]

The issue we’re running into is horizontal space. The logo and text is so large that it’s pushing everything down on separate lines.

You can try replacing this:

#mobile-header .menu-toggle {
    width: 120px !important;
    text-align: left;
    line-height: 60px;
}

With this:

#mobile-header .menu-toggle {
    text-align: left;
    line-height: 60px;
}

That should help a bit, depending on the width of the mobile device.

[Jo]

That didn’t make any difference.

I’m thinking I need to stay up at night as when I reply you are in bed.

I have changed the logo height to be 80px and that has now moved the logo up next to the menu toggle. However I have an iPhone but hopefully this will be good on all devices?

Please can the logo be moved slightly closer to the menu toggle. Please can the menu toggle be moved down so it’s centre against the logo.

Which leaves the rest of my previous message:

Below the logo can the social media icons (NOT phone) align to the right.

Keep the phone icon to the left. The phone number is 07903 329763.

Many thanks!

Jo

[Tom]

Hmm, I think we’ve complicated things.

We can definitely do the layout you mentioned.

First, let’s remove the CSS we added above and restart. Once removed, let me know and I’ll figure out the layout you’re looking for.

[Jo]

Hi,

Which CSS am I removing? You say ‘above’ but do you mean the last message above, or all of the CSS in this topic?

I don’t want to mess anything up.

[Tom]

Remove all of the CSS I’ve provided in this topic for now. It will be better to start from scratch instead of having to work around what we’ve already done. Some of it will likely be re-used, but I don’t want you to have any CSS in there that isn’t necessary.

Also, if you want to separate the phone number and the other icons, you need to place them in two separate elements within the function:

<span class="phone-number">
    Phone number icon in here
</span>
<span class="social-icons">
    Social icons in here
</span>

Then I’ll be able to use CSS to separate them.

[Jo]

I’ve deleted all CSS from this topic. Which leaves the following CSS from beforehand:

@media (max-width: 768px) {
.header-widget * {
margin-top: 20px;
text-align: center !important;
}
}

.custom-fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}

.custom-fixed-header + * {
padding-top: 120px;
}
.menu-toggle:before {
font-size: 35px;
}
.header-widget .textwidget h3 {
margin-bottom: 10px;
}

@media (max-width: 768px) {
#black-studio-tinymce-3 {
padding-bottom: 0;
margin-bottom: 0;
}
}

@media (max-width: 768px) {
#lsi_widget-4 {
display: none;
}
}

@media (max-width: 768px) {
.header-widget * {
margin-top: 20px;
text-align: center !important;
}
}

@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}
.mobile-header-content {
display: inline-block;
}
.mobile-header-content a{
display: inline-block;
}
.inside-footer-widgets {
text-align: center;
}

Do I need to remove any of this also?

[Tom]

Looks good.

Now, instead of the function you’re currently using to add icons, do this:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-bar-items">
        <span class="phone">
            <a href="tel:xx" target="_blank" rel="noopener noreferrer"><i class="fa fa-phone"></i></a>
        </span>
        <span class="social-icons">
            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>
            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a>
            <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer"><i class="fa fa-linkedin"></i></a>
        </span>
    </div>
<?php 
}

[Jo]

I’m struggling to understand how I separate the phone icon and social media.

This is how it currently is.

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

<i class=”fa fa-phone”></i>
<i class=”fa fa-facebook”></i>
<i class=”fa fa-twitter”></i>
<i class=”fa fa-linkedin”></i>

<?php }

How do I add the ‘span’ function you gave me?

[Author]

Posts