[Resolved] Mobile/tablet header

Home Forums Support Mobile/tablet header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1059327
    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

    #1059704
    David
    Staff
    Customer Support

    Hi there,

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

    #1059717
    Alberto Barrionuevo-Garcia

    Hi David,

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

    #1059752
    Leo
    Staff
    Customer Support

    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.

    #1059770
    Alberto Barrionuevo-Garcia

    I’ve already send it, thank you Leo.

    #1060064
    Tom
    Lead Developer
    Lead Developer

    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.

    #1061574
    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

    #1062123
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1062720
    Alberto Barrionuevo-Garcia

    It was exactly what we needed, thank very much

    #1063184
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.