- This topic has 18 replies, 3 voices, and was last updated 4 years, 1 month ago by Tom.
-
AuthorPosts
-
February 18, 2020 at 11:37 am #1169541William
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 #1169852TomLead 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.
February 19, 2020 at 6:24 am #1170250WilliamHi 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 #1171045TomLead 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 ๐
February 20, 2020 at 6:48 am #1171422WilliamHello,
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 #1171841TomLead 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.
February 21, 2020 at 5:50 am #1172500WilliamThank 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 #1172714DavidStaffCustomer SupportHi there,
in Customizer > Layout > Primary Navigation you can set the Mobile Menu Breakpoint to
0
so it uses the desktop nav instead.February 21, 2020 at 7:58 am #1172747WilliamHello,
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 #1172772WilliamAlso, 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 #1173136TomLead 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 ๐
February 22, 2020 at 1:32 am #1173321WilliamHi 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 #1173791TomLead 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.
February 23, 2020 at 4:00 am #1174205WilliamHi 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 #1174535TomLead 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%; }
-
AuthorPosts
- You must be logged in to reply to this topic.