Site logo

Archived topic

Resize Call to Action button in Primary Navigation

5 replies · Started by Jose on January 13, 2019

Viewing posts 1–6 of 6

Hello support,

Please help!!
Ive created a CTA but the contour of the button is the size of the nav-container so now the button is bigger than the logo (nav-logo). I would like to achieve something like http://www.createandgo.co

CSS used so far:

@media (min-width:769px) {.main-navigation .main-nav ul li.nav-button a {

background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #fb3c3c, #fb3c3c);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
color: #ffffff;
padding: 0px 15px 0px 15px;
text-decoration: none;
margin: 10px 5px 10px 5px;
}
}

.main-navigation .navigation-logo {
padding-top: 8px;

Hi there,

can you provide a link to the site? You can edit your original topic and use the Site URL for privacy.

Hi David,

http://www.pasivoingreso.com

I played around the wholelday yesterday and finally made it work somehow.

Now when is mobile, the logo is very tight in the bottom side. Please see my css and advice me how to lift logo if its possible in mobile version.

Where can I find updated documentation about hiding secondary menu in mobile?

See CSS:

@media (min-width:769px) {.main-navigation .main-nav ul li.nav-button a {

background: #ff5c5c;
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
color: #fff;
padding: 0px 15px 0px 15px;
text-decoration: none;
margin: 10px 5px 10px 10px;
}
}

.main-navigation .navigation-logo {
padding: 6px 0px 0px 14px

}
.main-navigation .navigation-logo img {
position: relative;
vertical-align: middle;
padding: 0px;

}

Give this a shot:

@media (max-width: 768px) {
    .main-navigation .navigation-logo {
        padding: 6px 0px 6px 14px;
    }
    .secondary-navigation .menu-toggle {
        display: none;
    }
}

You are the man!!
Thank you very much.

You're welcome

This archived topic is closed to new replies.