[Resolved] Navigation Hover Colour and Single Column Layout – Site based on Mellow

[Duncan]

Hi guys,

I’m playing around with a blog based on the Mellow site/template. I’m trying to change the navigation link colour when you highlight the link, and the blog post layouts.

I’ve managed to get the border to change colour on the selected navigation, and the highlighted navigation, but I can’t seem to crack the text highlight on hover!

Also, I prefer the look of Mellow with a single column (i.e multi-column disabled), but when I disable the multi-column there’s a large amount of padding around the post content and featured image.

I like the look of the featured blog post with 2 columns enabled. with the wider text area and full container width image. Is this easy to implement with CSS in a single column layout?

Any help would be appreciated.

My site is https://duncanbain.io/blog

[Leo]

Hi there,

The navigation colors should be coming from the page hero settings:
https://docs.generatepress.com/article/header-element-overview/#site-header

Not quite sure what you mean about the column and padding issue but perhaps these setting might help?
https://docs.generatepress.com/article/content-padding/
https://docs.generatepress.com/article/container-width/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo,

Thanks for the reply! I completely forgot about the navigation bar options on the page hero, I was using the Colors plugin, but it wasn’t working! Altering the page hero options worked fine.

I’ve tried those settings, but it doesn’t quite do what I want to do. I’ll try and explain it better with some images:

This image is my current settings, 2 columns posts with the latest post as a featured post.

This is with a single column, and no option for a featured post:

I would like to have a single column layout, but with all the posts looking like the 2 column featured post. I.e full width image and larger text column width.

Although re the text width, I think the text width in both layouts are the same, for featured post in 2 column, and all posts in single column.

Cheers,

[Leo]

I believe you are looking for the Display padding around images setting:
https://docs.generatepress.com/article/adjusting-the-featured-images/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

I’ve tried that, on or off, makes no visible difference. The CSS being used for the featured post image when in 2 column layout is:

.no-featured-image-padding .post-image {
    margin-left: -70px;
    margin-right: -70px;
}

I can’t seem to apply this to the img class when using single column layout. Nothing seems to happen!

[Duncan]

It seems that CSS is being over-ridden by the following:

.no-sidebar:not(.generate-columns-activated) .inside-article > *, .no-sidebar #comments {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

But this CSS block applies to the whole post content, so if I apply the -75px margins it shifts the post content, not just the image.

I guess I need to figure out how to apply it images within the inside-article class?

Edit:

.no-featured-image-padding .post-image {
max-width: 150% !important;
margin-left: -70px !important;
margin-right: -70px !important;
}

Feels like a bit of a sledgehammer to crack a nut, but will do for now!

Edit: Obviously broken on mobile!

[Leo]

The option should definitely work.

Can you
– Temporarily remove all the CSS you’ve added for the featured images
– Disable any caching plugins including Autopimize
– Make sure the option Display padding around images is not checked

And I’ll have a look to see why it isn’t working.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo,

I removed the CSS. It seems like

.no-sidebar:not(.generate-columns-activated) .inside-article > *, .no-sidebar #comments {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

was something I added, who knows why, but everything is working now I’ve removed it!

I also removed

.no-featured-image-padding .post-image {
max-width: 150% !important;
margin-left: -70px !important;
margin-right: -70px !important;
}

Thanks for your help!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts