- This topic has 18 replies, 3 voices, and was last updated 2 years, 11 months ago by
Tom.
-
AuthorPosts
-
February 18, 2020 at 11:37 am #1169541
William
Hi there,
I’m quite new to GP Premium so wanted to confirm how I could make the page look something like this:
https://www.litcharts.com/lit/1984/themes
or get my website (https://bookanalysis.com) look as close to this example of a post (from litcharts) as possible.
I especially like the search bar in the header, category appearing above the post content, and menus that change per category displayed. Is this possible or how would I go about making GP Premium appear like this?
Many thanks,
Will
February 18, 2020 at 7:59 pm #1169852Tom
Lead DeveloperLead DeveloperHi there,
Best to tackle one thing at a time.
The first thing I would do is float your navigation right using the Navigation Location option:
Then, I would add the “Search” widget to the “Header” widget area in “Appearance > Widgets”.
Then let me know and I’ll provide some CSS to make the layout work.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 19, 2020 at 6:24 am #1170250William
Hi there,
Thank you for your help. I’ve modified the website as much as I think I can and hope that’s good basis to go by.
With the widgets in the header, is there able to be padding between them as they are directly next to eachother.
Also, regarding the mentioning of the category appearing above the post content, and menus that change per category displayed, similar to litcharts.com, is this possible?
Kind regards,
Will
February 19, 2020 at 7:53 pm #1171045Tom
Lead DeveloperLead DeveloperTry this CSS:
.inside-header { display: flex; align-items: center; } .site-branding { order: 1; } .header-widget { order: 2; margin-left: auto; margin-right: 20px; } .main-navigation { order: 3; } .nav-float-right .header-widget .widget { padding-bottom: 0; } .nav-float-right .header-widget { top: auto; }
Can you explain a bit more about the category titles/menus changing? Screenshots pointing out specifically what you’re after might help.
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 20, 2020 at 6:48 am #1171422William
Hello,
This is great. But this has changed the mobile look from the search bar appearing the width of the mobile device. Also, is it possible to have the menu appear as links and not in a canvas? (for the top menu)?
I’ve worked on adding an element for the category so that’s all good.
Kind regards,
Will
February 20, 2020 at 10:13 am #1171841Tom
Lead DeveloperLead DeveloperTry adding this as well:
@media (max-width: 768px) { .inside-header { flex-direction: column; } .header-widget { margin-left: auto; margin-right: auto; margin-top: 20px; } }
You can change the appearance of the menu items in Customize > Colors > Secondary Navigation.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 21, 2020 at 5:50 am #1172500William
Thank you for this – that seems to have worked. In terms of expanding the menu, so it isn’t a drop down, but shows just links for mobile (like it does for desktop), can that be achieved?
Kind regards,
Will
February 21, 2020 at 7:24 am #1172714David
StaffCustomer SupportHi there,
in Customizer > Layout > Primary Navigation you can set the Mobile Menu Breakpoint to
0
so it uses the desktop nav instead.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 21, 2020 at 7:58 am #1172747William
Hello,
bookanalysis.com looks better – the only issues are:
1. the primary menu and search bar does not appear side by side for desktop/tablet viewing
2. for the mobile view, I would prefer the search bar to appear below the header, and the primary menu to be centeredThanks for the support,
Will
February 21, 2020 at 8:22 am #1172772William
Also, is there a way to change the width of the menu/search bar collectively for desktop/tablet? The search bar has a small width at the moment.
February 21, 2020 at 4:59 pm #1173136Tom
Lead DeveloperLead DeveloperHi there,
This CSS is no longer on the site: https://generatepress.com/forums/topic/add-widget-extended-category-information-above-post-title/#post-1171045
To increase the search bar width, try adding this:
.nav-float-right .header-widget { width: 300px; max-width: 100%; }
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 22, 2020 at 1:32 am #1173321William
Hi there,
Sorry about that, I’ve added the CSS back in and added the extra css above. However, it doesn’t seem to have an impact on the width.
Kind regards,
Will
February 22, 2020 at 10:30 am #1173791Tom
Lead DeveloperLead DeveloperHere’s what I’m seeing now: https://www.screencast.com/t/wNY0VJqMVWW
If you want it to be wider, you can increase the 300px.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 23, 2020 at 4:00 am #1174205William
Hi there,
That’s great thank you. I think the issue is that on posts, it doesn’t still show correctly:February 23, 2020 at 9:48 am #1174535Tom
Lead DeveloperLead DeveloperThat’s because the navigation is floating right like on the other page.
You could try this:
.header-widget { width: 300px; max-width: 100%; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.