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

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

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

[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

[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;
    }
}

[Kevin]

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

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

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

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

[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

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

[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

[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

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

[Jamal]

Now you can add this css

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

[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

[Author]

Posts