[Support request] Aligning Logo with CTA & Mobile Menu Item

Home Forums Support Aligning Logo with CTA & Mobile Menu Item

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #364592
    Kevin

    Hi,

    I’ve just set up GP and added the Premium Addons. However, I have issues:

    1. I’m unable to align the Logo and the Text Widget that holds a CTA on the Header.
    See here > http://meine-ec-karte.de/
    How do I align the two to get something like this?
    Intended Result > http://www.mein-p-konto.de/
    The checkboxes for both the Site Tagline and Site Title have been disabled.

    2. I would like to add the current CTA onto the Mobile Menu
    See the Mobile version of this site > http://www.mein-p-konto.de/

    Thanks!

    GP Premium 1.4.2
    #364642
    Jamal

    Hi

    You can do the following:
    1.

    /* Vertically aligning header widget with logo */
    @media( min-width: 769px ) {
        .header-widget {
            padding-top: 53px;
        }
    }

    2. We will first hide the header widget on mobile

    @media( max-width: 769px ) {
        .header-widget {
            display: none;
        }
    }

    Then you can put the CTA link as a custom link in the menu https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link. You can then hide the menu on desktop and so on so lets do the above and see how far we come first.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #364681
    Kevin

    Thanks for the quick feedback.

    1.

    For the first question, I wasn’t able to change it. Here is what I’m using:

    HTML on the Text Widget inserted into the Header:

    Jetzt eine EC Karte ohne Schufa beantragen!

    CSS;

    .button.custom {
    background-color:#0cdb08!important;
    min-width:769px;
    padding-top:53px;
    }

    .button.custom:hover,.button.custom:focus {
    background-color:#00cbef!important;
    }

    2.
    For the 2nd question, I added the CSS and created a Custom link Menu for the item I needed. It’s now visible on the Mobile view. However, the Mobile Menu is not boxed in as it appears on this example: http://www.mein-p-konto.de/

    Additionally, now the Desktop Header dimensions seem to be affected by the addition of the Menu Item

    #364727
    Jamal

    Before you go any further i would advise you to install this plugin and transfer all your custom css in there https://wordpress.org/plugins/simple-css/. Or see the documentation for other recommended ways to add css https://docs.generatepress.com/article/adding-css/

    For your first question, we are adding a top padding to the header widget itself so you don’t need to add any extra html than what you had before starting this support thread. So please revert back everything as it was and then add the below css using one of the recommended ways.

    @media( min-width: 769px ) {
        .header-widget {
            padding-top: 53px;
        }
    
        nav#site-navigation {
            display: none;
        }
    
    }
    
    @media( max-width: 768px ) {
        .header-widget {
            display: none;
        }
    }

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #364733
    Kevin

    Thanks!
    I just reverted to the initial CSS and injected your CSS with Simple CSS. That has now solved question #1

    #364791
    Jamal

    I think the second question is also solved. You just have to:
    – Apply colors to your primary navigation https://docs.generatepress.com/article/colors-overview/
    – Chose your menu item alignment to center https://docs.generatepress.com/article/navigation-layout/

    You are very welcome. And please don’t hesitate to ask if you have further questions.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #364816
    Kevin

    I was able to change the color of the Mobile Menu. I also followed Option 2 below:

    1. Setting this to Full will make your background color/image span the entire width of your screen.
    2. Setting it to Contained will contain it to the width of your container, set in Appearance > Customize > Container.

    However, the Navigation Width option 2 doesn’t seem to give me the same results as seen here > http://www.mein-p-konto.de/

    #364866
    Jamal

    Ah didn’t even realize the other site is also a GP site.
    1. Chose your navigation location to align right https://docs.generatepress.com/article/navigation-location/ (we might need to hide it on desktop with a different selector but we will see)

    2. Increase your header padding to 40px https://docs.generatepress.com/article/header-padding/

    3. Set your menu item height to 60px https://docs.generatepress.com/article/menu-item-height-width/

    That should get us very close if not all the way.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #365302
    Kevin

    I’ve made all 3 changes:
    1. http://prntscr.com/g80ftu
    2. http://prntscr.com/g80gdc
    3. http://prntscr.com/g80h05

    However, all they have done is increase the Desktop header dimensions.

    On the mobile view, the height of the Mobile Menu bar has also increased

    #365307
    Jamal

    http://prntscr.com/g80ftu

    In these settings can you change navigation location to float right and navigation alignment to left. Those are the settings for this site which you want to have a similar look to http://www.mein-p-konto.de/

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #365312
    Kevin

    Made the change. Looks similar now. Thanks!

    How do I reduce the Mobile Header height to a fourth of the screen? (http://prntscr.com/g80qkv ) It’s currently taking up almost half of the mobile screen

    #365315
    Kevin

    And would that affect the Desktop Header height? http://www.mein-p-konto.de/ Has a thinner Header

    See here > https://prnt.sc/g80rpu

    #365319
    Jamal

    Can you first remove the css from https://generatepress.com/forums/topic/aligning-logo-with-cta-mobile-menu-item/#post-364727 its not needed at all now. Remove the header widget as well.

    Then you can change the top and bottom paddings here to values that suit you. This will affect both desktop and mobile. https://docs.generatepress.com/article/header-padding/

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #365330
    Jamal

    Now you can add this css

    @media ( min-width: 769px ) {
        nav#site-navigation {
            margin-top: 42px;
        }
    }

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #365341
    Kevin

    The new CTA is now aligned with the Logo. Thanks.

    How do I modify the new CTA on the Header with the following specs just like the CTAs on the actual page?

    <i class=”fl-button-icon fl-button-icon-before fa fa fa-arrow-circle-right”></i>
    Background color – #0cdb08
    Background hover color – #00cbef
    Text color – #0c0100
    Text hover color – #ffffff
    Style – Gradient with a transition
    Font size -22px
    Padding – 10px
    Round Corners – 4px
    Button width – auto

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