[Resolved] Mobile/tablet header

[Alberto Barrionuevo-Garcia]

Hi,
We’ve customised our mobile/tablet header adding 3 code snipes:
1. One for the logo because we needed a different height for the menu items and the mobile logo

<div class="my-mobile-logo">
	   <a href="https://www.axarsol.es"><img src="https://www.axarsol.es/wp-content/uploads/2019/11/logo-axarsol-transparente-300x81-1-e1572886686260.png" alt="LOGO" /></a>
</div>

Image size: 200 x 54 px

2. Another for a quotation button

<div class="my-header-button">
	   <a class="button" href="https://www.axarsol.es/presupuesto/">Presupuesto</a>
</div>

(Pending customisation)

3. And the last one for a whatsapp icon

<div class="mobile-header-social">
  <a href="https://api.whatsapp.com/send?phone=+346XXXXXXXX&text=Quiero%20solicitar%20un%20presupuesto"><img src="https://www.axarsol.es/wp-content/uploads/2019/10/whatsapp_logo.png" height="35" width="35" style="vertical-align: middle"></a>
</div>

They work fine, we set the order correctly via css and the menu stripes were on the right, so far so good.
But we found difficulties trying to vertically align them and also spacing them. Could you help us to solve it, the ideal scenario is having them vertically aligned to the middle and horizontally sorted along the header in a way that there would be the same space between them. We’d like to avoid padding-xxx in order to make the design valid for both tablet and mobile views.

Our css code so far:

/* RESPONSIVE */
/* POSITION */
.mobile-header-navigation .my-mobile-logo {
	order: -3;
	width: 45%;
	padding-top: 10px
}
.mobile-header-navigation .my-header-button {
	order: -2;
	width: 25%;
	padding-top: 12px
	}
.mobile-header-navigation .mobile-header-social{
	order: -1;
	width: 10%;
	padding-left:10px;
	padding-top: 10px
}

/* CUSTOMISATION */
.mobile-header-navigation .my-header-button a {
	  width: 80%;
	  padding: 8px 12px;
	  font-size: 12px;
	  border-radius: 5px;
}
.mobile-header-navigation .my-mobile-logo img{
	  width: 95%;
 }

.

Thank you very much in advance.
Antonio

[David]

Hi there,

can you provide us with a login for the site or temporarily remove the login?

[Alberto Barrionuevo-Garcia]

Hi David,

Sure, but please, how can I make private comments?

[Leo]

You can send the login info using Account Issue here:
https://generatepress.com/contact/

Please include the following information:
– The URL of this topic.
– Login URL.
– Username and password.

[Alberto Barrionuevo-Garcia]

I’ve already send it, thank you Leo.

[Tom]

Hi there,

You could try this:

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

Then you’ll need to tweak/remove some of the top margins you’ve added to those elements so they center.

[Alberto Barrionuevo-Garcia]

Hi,

Thank you Tom, it worked, now the problem is the tablet view, it seems like there are two separated blocks, one containing all of the three hooks and the other just the menu stripes (I think the name is hamburger). We tried to insert the hooks into “inside_mobile_menu” instead of into “inside_mobile_header” area but they just disappeared, so please, is there any way to join both blocks so all four elements look like the mobile view?

And I’d also like to cut down the space at the bottom of the header, header bottom padding is already set to 0 px.

Thank you in advance,
Antonio

[Tom]

Are you wanting all three items on the right side?

If so, try this:

.main-navigation:not(.slideout-navigation):not(.has-branding):not(.has-sticky-branding) .menu-toggle {
    flex-grow: 0;
}

.mobile-header-navigation .my-header-button {
    margin-right: 0;
}

.mobile-header-navigation .mobile-header-social {
    margin-left: 0;
    margin-right: 0;
}

[Alberto Barrionuevo-Garcia]

It was exactly what we needed, thank very much

[Tom]

You’re welcome 🙂

[Author]

Posts