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

[Jamal]

You can add the icon like this https://docs.generatepress.com/article/adding-icons-to-menu-items/

Add the below icon before this text “Jetzt eine EC Karte ohne Schufa beantragen!”
<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>

Change the primary navigation background color to #def5f9, change https://docs.generatepress.com/article/colors-overview/

Add the custom class jetz-eineto your CTA menu item https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes and then add the following css

.main-navigation .main-nav ul li.jetzt-eine a {
    background-color: #0cdb08;
    border: 4px solid #0cdb08;
}
.main-navigation .main-nav ul li.jetzt-eine a:hover {
    background: linear-gradient(to bottom,#1ee9ff 0%,#00cbef 100%);
    border: 4px solid #00bfe3;
}

Your CTA already has a right and left padding of 20px but you cn increase it here https://docs.generatepress.com/article/menu-item-height-width/

You can change the font size https://docs.generatepress.com/article/typography-overview/

[Kevin]

I’ve now added the icon before the text and changed the hover background color and hover text color. Thanks

The padding is now adjusted > http://prntscr.com/g8648p

I’ve also added the custom Link > http://prntscr.com/g862it
However, the border radius is still not correct.
Will border-radius: 4px; help?

The adjustment to the font size seems to change the font size of the whole page. How do I change the font size of just the header CTA?

[Tom]

For border radius and font size, this should do it:

.main-navigation .main-nav ul li.jetzt-eine a {
    font-size: 13px;
    border-radius: 4px;
}

[Kevin]

That did not work. Here is the CSS > http://prntscr.com/g8d0tb

[Leo]

There is typo in the selector.

Change your selector from:
.main-navigation .main-nav ul li.jetzt-eine a
to
.main-navigation .main-nav ul li.jetz-eine a
since jetz-eine is what you used in the menu item custom class.

[Kevin]

I’ve also added an affiliate Link to the Header CTA. It seems to change the dimensions as well.

The link has to be entered in this form: <!-- Beginn http://www.financeads.net/-Code --><a href="http://www.financeads.net/tc.php?t=25952C56233929T" target="_blank"> Jetzt eine EC Karte ohne Schufa beantragen!</a><img src="http://www.financeads.net/tb.php?t=25952V56233929T" alt="" border="0" width="0" height="0" /><!-- Ende http://www.financeads.net/-Code -->

[Leo]

Making sure you see my reply here: https://generatepress.com/forums/topic/aligning-logo-with-cta-mobile-menu-item/page/2/#post-365741

The FontAwesome doesn’t need to be its own tag other wise they will be stacked with the text.

[Kevin]

I amended the selector but the issue with the header cta remains because of the affiliate link

[Jamal]

I think what you want to do is this:

1. Add this affiliate link as a custom link in primary navigation http://www.financeads.net/tc.php?t=25952C56233929T
2. Set the target to blank
3. Set primary navigation background color to this http://www.financeads.net/tb.php?t=25952V56233929T

You can do number 1 and add the font awesome icon as well. To set the link target to blank,we will do a similar step to when we were adding a css class but this time chose link target option https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
And under your custom link click on “Open link in a new tab” http://i.imgur.com/tII3HHk.png

Next make sure the background add-on is activated and then follow this https://docs.generatepress.com/article/backgrounds-overview/. Click on primary navigation and upload your image under navigation item and navigation item hover. You will need to have that image saved on your computer first.

[Kevin]

I couldn’t add the FontAwesome. So what I did was create a CSS to add it:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: arrow-circle-right;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

And I’m using this custom link:
Jetzt eine EC Karte ohne Schufa beantragen!

Here are the settings > http://prntscr.com/g8x6br

However,
1. now the CTA dimensions have changed again
2. It seems like a blank layer is being created above the CTA text

Regarding you you instructions:
“Next make sure the background add-on is activated and then follow this https://docs.generatepress.com/article/backgrounds-overview/. Click on primary navigation and upload your image under navigation item and navigation item hover. You will need to have that image saved on your computer first.”

The CTA doesn’t have an image. So I’m not sure what you meant

[Tom]

You shouldn’t add the full link element in the Navigation label (no <a> element).

You should only add the icon: <i class="fa fa-arrow-circle-right"></i>

[Kevin]

Hi Jamal, Hi Tom,

Solved the issue by trial and error 😊

The issue was the <p></p> tags. On the Navigation label, I initially had:

<p><font size=”3″><i class=”fa fa-arrow-circle-right”></i> <b>Jetzt eine EC Karte ohne Schufa beantragen!</b></font></p>

<p></p> were creating a new empty layer above the text. So I changed the tags to div:

<font size=”3″><i class=”fa fa-arrow-circle-right”></i> <b>Jetzt eine EC Karte ohne Schufa beantragen!</b></font>

Thanks for the help with the issues!

On an unrelated issue:
I created this page (http://meine-ec-karte.de/girokonto-ohne-schufa/) and added the following service box:
http://prntscr.com/gadocl

However, there are 2 issues with the service box:
1. Even though I’ve added the following CSS and centered the box for Desktop, it seems to be left aligned.

.wpsm_serviceBox {
width: 850px;
}
.wpsm_serviceBox .wpsm_read_more {
width: 200px;
font-size: 17px;
}

2. How do I align it for Mobile view? It’s not device responsive
Thanks!

[Leo]

Is that inserted using a plugin? Looks like it’s more complicated then it needs to be.

Could just do something like this in the content:

<div class="service-box">
    service box content here
</div>

Then add this CSS to style and align it:

.service-box {
    max-width: 800px;
    background-color: #def5f9;
    margin: auto;
}

[Kevin]

Hi Leo,

You are right. The plugin was complicating everything. I deleted the plugin and just used your suggestion.

Thanks!

[Leo]

No problem!

[Author]

Posts