- This topic has 14 replies, 3 voices, and was last updated 3 years, 6 months ago by Tom.
-
AuthorPosts
-
September 29, 2020 at 3:47 am #1463487Mark
Hey guys. I like the logo placement and the way the menu interacts on this site. Is this possible to implemt on my site using css or the product features available in your plug in. My site
The Site I would like to replicate in some way.
If so can someone give me guidance please if that’s ok or point me in the right direction to style my site.
September 29, 2020 at 4:00 am #1463513DavidStaffCustomer SupportHi there,
First make sure you have the Mobile+ Module and any other options you require enabled in Dashboard > Appearance > GeneratePress.
Then go to Customizer > Layout > Header and enable the Navigation as Header option:
https://docs.generatepress.com/article/navigation-as-a-header/
You will probably want to adjust the Colors > Primary Navigation and the Layout > Primary Navigation –> Menu Item Spacing so as the menu items will fit the inline space.
Get that bit done and let us know what else you want to match. eg. Menu Hover underline.
September 29, 2020 at 4:24 am #1463540MarkFirstly thank you for such a fast response. I have done that.
Is there a way to have the menu interact the same as theirs and also how do I remove the word menu from the site?
I like the way their menu pops open from the side with quite large lettering and the plus sign.
Sorry for so many questions.
September 29, 2020 at 4:47 am #1463565MarkOh and sorry, I have a page title H1 element but I want to to look smaller. When I added it all my images became smaller.
September 29, 2020 at 5:11 am #1463589DavidStaffCustomer SupportCan you disable your cache plugin?
September 29, 2020 at 5:49 am #1463638MarkI have disable the plug in.
September 29, 2020 at 6:05 am #1463662DavidStaffCustomer SupportThanks – now set the Inner Navigation Width to Contained:
https://docs.generatepress.com/article/primary-navigation-layout-overview/
You can also enable Navigation Search from the same panel.
You may want to consider a more suitable logo for this type of layout. Logos when the nav as set header will use the Menu Item height for its sizing.
For the menu hover effect add this CSS:
@media (min-width: 769px) { .main-navigation .menu > .menu-item > a::after { content: ""; position: absolute; right: 20px; left: 20px; bottom: 15px; display: block; height: 2px; background-color: currentColor; transition: 0.3s width ease; opacity: 0; } .main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after { opacity: 1; } }
September 29, 2020 at 6:29 am #1463705MarkThank you for your help. Can you tell me if the code has made a change to the menu. I am not seeing it.
September 29, 2020 at 6:58 am #1463739DavidStaffCustomer SupportWhere did you add the CSS? I am not seeing it on the site
September 29, 2020 at 7:26 am #1463774MarkStrange I added to the additional CSS section it’s still there and published. I havent turned my cache plug in back on either.
September 29, 2020 at 7:48 am #1463856DavidStaffCustomer SupportAah found it.
Before that CSS you have this:Documentation:
remove that as its stopping any CSS after it from applying.
Comments have to be added like so:
/* Comments */
September 29, 2020 at 8:08 am #1463994MarkHi, I am really sorry. I have removed the documentation and it still doesn’t seem to be working.
September 29, 2020 at 8:49 am #1464059DavidStaffCustomer SupportIts working for me ie. the menu items are underlined on hover – maybe browser cache needs clearing.
You may want to remove the Hover background color in Customizer > Colors > Primary Nav.
Let me know if i misread the requirement – an no apologies necessary 🙂
September 29, 2020 at 9:35 am #1464121MarkThank you. You’re a star. One last thing and this may not be achievable but the H1 tag at the top of my page is rather large. Can you tell me how to make it smaller in size. When I added the element it appear to have reduced the size of my images. It’s ok if this can’t be done easily.
September 29, 2020 at 3:33 pm #1464491TomLead DeveloperLead DeveloperHi there,
Are we talking about the “Parenting & Lifestyle” title?
If so, try this CSS:
.page-header h1 { font-size: 1.5em; }
-
AuthorPosts
- You must be logged in to reply to this topic.