[Resolved] Larger Logo in Bold Demo

[Richard]

Guys,

The client wants the logo to be bigger here:

https://divorce.rife.agency/

I found this:
.main-navigation .site-logo.navigation-logo {
position: absolute;
left: 0;
top: 0;
}
.main-navigation .site-logo.navigation-logo img {
height: 600; /* Set the image height of logo in px */
}

But not sure if .site-logo.navigation-logo is correct (it doesn’t come up when viewing the page source)?

Thanks very much,
Richard

[David]

Hi there,

the site uses the Navigation as Header function ( Customizer > Layout > Header ).
And this means the Logo will get its size based upon the Menu Item Height of the Customizer > Layout > Primary Navigation.

If you want to set its size independently then use this CSS:

.main-navigation .navigation-branding img {
    height: 100px;
}

[Richard]

Thanks David – I knew I’d seen it in the customizer somewhere!

I’m trying to make one of the menu item text come out in a different colour (Disclaimer).

I had made the whole box FF4B00, but now the logo’s much bigger, the HUGE box is OTT.

I’ve tried this, but it’s obviously not right:

.menu-item-2280 {
color: #FF4B00 !important;
}

Thanks again,
Richard

[David]

For the nav item colors – use the method here:

https://docs.generatepress.com/article/adding-buttons-navigation/

You just require the color property in your CSS rule.

[Richard]

Sorry, David, I’m struggling with this.

I have the Search demo on my site (https://rifeagency.co.uk/) and have enabled CSS in menus.

The “Contact” button is in a box which would be ideal.

I can see the CSS Class is set to “nav-button”, but when I go to Customizer/Additional CSS, I’m unable to find “nav-button”?

What am I missing?

Thanks very much,
Richard

[David]

You should see this CSS in the Customizer > Additional CSS:

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
    color: rgba(72, 45, 112, 1.0);
    border: 3px;
    border-style: solid;
    line-height: 36px;
    border-radius: 2px;
    margin-left: 20px;
    transition: all 0.6s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
    color: rgba(72, 45, 112, 0.8);
}

you can edit that to suit your needs.

If you need any assistance with it – raise a new topic, as its unrelated to this, and that will make it easier for you and others to find these answers in the future 🙂

[Richard]

FANTASTIC!

Sorry for being so slow!

Thanks very much,
Richard

[David]

No problems – glad to be of help!

[Author]

Posts