Site logo

Archived topic

How to set homepage and navigation menu style like this website ?

43 replies · Started by Fajri on November 20, 2018

Viewing posts 1–15 of 44

How to set homepage and navigation menu style like this website ?

Website URL has been submit in box below

Hi there,

The menu is using some custom CSS to give it a gradient background:

.mobile-header-navigation, .main-navigation {
    background: linear-gradient(to right,#5b86e5,#36d1dc);
}

The blog posts are using columns: https://docs.generatepress.com/article/using-columns-in-the-blog/

The featured images are hugging the containers by unchecking the "Display padding around images" option in that same section: http://prntscr.com/lkx9gi

Let me know if you need help with anything else :)

where is the custom code css i add ?

Tell me too how to make readmore like the url and hidden / no except text in homepage

CSS can be added using one of these methods: https://docs.generatepress.com/article/adding-css/

Excerpt can be hidden like this:

.generate-columns-container  .entry-summary {
    display: none;
}

You can turn on the read more button in Customize > Layout > Blog and set the colors in Customize > Colors > Buttons.

-

Can you link me to what you have so far?

To add the shadows, you can do this:

.inside-article {
    border-radius: 5px;
    margin: 5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

Yes, i can show you my website but not in public. Have you other way ?

respon please

You can edit your topic and use the website field for your URL.

Also, it can take up to 12 hours for a response in the forums here. It's 10PM here, so I won't be able to help more until the morning.

Thanks!

-

1. With this CSS:

.entry-summary > p:not(.read-more-container) {
    display: none;
}

2. Turn off the masonry option in Customize > Layout > Blog, but keep the columns option enabled.

-

-

This archived topic is closed to new replies.