[Resolved] CSS related

[Swadhin]

Please help me with the following:

1. How to make my H1 center aligned only inside the article, not archives etc.? And, it should be displaying this effect (please refer this page and you’ll find the H1 is wider than the content. I’d like something equal.
2. I have set a specific menu item with the CSS class nav-button. But, nothing happens! Any idea how to get the button there? I am looking to have this effect and styling for he menu button like this page has.
3. I’d like to have my buttons display this effect when hovered. Please check the above link (please search for: “download it here” without quotes).

I have shared my URL in the secret code box.

Thanks so much,
-Swadhin

[Ying]

Hi there,

Let’s handle 1 question at a time:

it should be displaying this effect (please refer this page and you’ll find the H1 is wider than the content. I’d like something equal.

I’m confused you want something equal, but you want to displaying this unequal effect, so do you want it or not?

To center the H1 inside single post not archive, try this CSS:

.single-post h1 {
   text-align: center;
}

Let me know if I miss anything.

[Swadhin]

Hi Ying,

Thank you for replying. 🙂

That code didn’t work on pages so I used this code instead. Please let me know if it is correct to use this code or if I should change something.

h1.entry-title {
    text-align: center;
}

By “equal” I meant something “similar”. So, in other words, I want to replicate that style to the exact pixel width (title is a bit wider and blog post is a bit narrow) for my articles and pages.

Also, I have updated the second question, in order to avoid confusion.

-Swadhin

[Elvin]

Hi Swadhin,

For the fonts, consider using Appearance > Customize > Typography to adjust font size for archive titles, page titles and post titles on archive page – https://share.getcloudapp.com/4guPp2z2

As for the second question: I’ve inspected the page you’ve linked and I didn’t see any menu item that had nav-button class as shown here – https://share.getcloudapp.com/nOu5yomG

Can you confirm if it’s added and saved to the target menu item you plan to turn into a button?

[Swadhin]

Hi Elvin,

I am sorry but maybe you didn’t understand the query.

I did not ask about the font anywhere in the query. I have repeatedly asked how to get the layout similar. The one where the title is center aligned and a bit wider and the content (article) is a bit narrow than the width of the title. Please check the image.

For the second question:

I said, I have used the nav-button class in my website (linked in the secret box of the query. I still don’t see any buttons in the menu (of my website).

So my question is, why is the button not appearing?

And.. in case you can help me with the button’s appearance, please also help me with the code for styling the button in the way this website does for its own menu button.

[David]

Hi there,

in order to have the Title wider then the post content, the simplest method is to use a Block Element – Page Hero:

https://docs.generatepress.com/article/block-element-page-hero/

[Swadhin]

Hi David,

I am seeing the post in the content has different width for pages and for posts. I am not sure how that works. If you can help me why the content (& title)’s width is different in a page and a post and what to do to make them similar.

Once they are similar, we can use the block element (as described by the tutorial you linked) to create the page hero.

P.S. Is this (page hero) theme dependent?

-Swadhin

[David]

The post content size has been adjusted by either:

a) A Loyout Element ( in Appearance > Elements ):

https://docs.generatepress.com/article/layout-element-overview/

or

b) some Custom CSS added to your site. Which looks like this:

#content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

If i were a gambling man then i would bet on option a)

P.S. Is this (page hero) theme dependent?

Its a GP Premium function – which only works with the GeneratePress Theme, and therefore any Site in our library.

[Swadhin]

Got it David. You’re 100% right! 🙂

That’s actually by a page element (I added it but I think I need to add something for better memory too :P)

David, I am not sure if I want a theme dependent workaround. (Not that I will leave GP, been with it since 2017 I guess) but in case. Can we achieve this with code?

I want the content width (on pages without sidebar/s) to be 800px and the title to be (something that the page I linked as example) has.

Thank you. 🙂

[David]

David, I am not sure if I want a theme dependent workaround. (Not that I will leave GP, been with it since 2017 I guess) but in case. Can we achieve this with code?

Any solution i provide will be theme dependent – as it means moving the Title outside of the main content. So i am afraid i cannot provide a theme agnostic solution.

The block element, like the layout element is a non-destructive change, so if you disable the elements or switch theme then title will return to the default theme position.

[Swadhin]

Awesome David!

Thank you. I will go with the block element.

Can you help me with the other two queries (above) please 🙂

Let me rephrase them both for you…

I want my buttons to have the hover effect (bouncy/clicky etc) like buttons on this page.

After doing so, how can I display this button or call it to appear in one of the menu items?

[David]

Nav button styles:

/* Nav button styles */
.main-navigation .main-nav ul li.nav-button a {
    background-color: #f00;
    color: #fff;
    line-height: 40px;
    border-radius: 2px;
}
/* Nav button hover colors - optional */
.main-navigation .main-nav ul li.nav-button:hover a {
    background-color: #f00;
    color: #fff;
}

And hover effect for nav and theme button

/* Nav Button and Button hover effect */
.main-navigation .main-nav ul li.nav-button a,
a.button {
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
    transition: transform 0.2s ease-in;
}

.main-navigation .main-nav ul li.nav-button:hover a,
a.button:hover {
    transform: translate3d(0, 5px, 0);
}

[Swadhin]

Hi David, thank you so much.

Apologies for whatever non-techie things I say now, but if it makes sense, can you please take a look at them?

Our button, upon applying the above code, feels a bit slower than theirs. (again, it might be just me but I feel this) and there’s this shadow thing in their button I think too that doesn’t appear in ours.

This would be the last request in this support topic and I’d appreciate if you could take a look at this. 🙂

Thank you again,
-Swadhin

[David]

Updated CSS above, with box-shadow and reduced transition time

[Swadhin]

Thank you David. It worked 🙂

[Author]

Posts