- This topic has 21 replies, 3 voices, and was last updated 4 months ago by
Leo.
-
AuthorPosts
-
September 14, 2020 at 1:03 pm #1443151
Rohan Verma
Hello.
How can I add a trending section or bar below the main menu like this?
The site where need to implement: https://www.gadgetheadline.com/
Screenshot: https://prnt.sc/uh8on9
September 14, 2020 at 1:16 pm #1443168Leo
StaffCustomer SupportHi there,
Several methods that should all work:
– Create a header element with the desired HTML content:
https://docs.generatepress.com/article/header-element-overview/– Create a hook element with the desired HTML content:
https://docs.generatepress.com/article/hooks-element-overview/– Create a block element (if you prefer the block element) with GenerateBlocks:
https://docs.generatepress.com/article/block-element-overview/
https://wordpress.org/plugins/generateblocks/If you are using a hook or block element, the
generate_after_header
hook should work:
https://docs.generatepress.com/article/hooks-visual-guide/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 15, 2020 at 9:37 am #1444494Rohan Verma
Sorry but I really can’t understand what to do next?
Can you share me the code what this site is using for secondary navigation?
Or if I go with hook element, then what to include in the hook content area?
September 15, 2020 at 9:41 am #1444505Leo
StaffCustomer SupportThat site isn’t using any code for the secondary navigation – it’s just using the secondary navigation set to below header:
https://docs.generatepress.com/article/secondary-navigation-layout-overview/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 15, 2020 at 1:30 pm #1444831Rohan Verma
Oh my mistake.
I was asking for this. Now, how can I add a hot/trending icon and divider between secondary menu items?
Like this: https://prnt.sc/uh8on9
September 15, 2020 at 2:01 pm #1444857Leo
StaffCustomer SupportCan you link me to the site where the screenshot is taken?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 16, 2020 at 3:52 am #1445431Rohan Verma
Yes. Sure.
Here is the site link: https://www.dexerto.com/
September 16, 2020 at 6:20 am #1445625David
StaffCustomer SupportHi there,
Edit your Secondary Menu.
Add a new Custom Link to the top of the menu.
For the URL add#
For the Label add this:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12"><path fill="#2f2ffc" fill-rule="evenodd" d="M12.857 0l2.76 2.854-4.175 4.535-4.777-4.927L0 11.822l6.665-5.91 4.777 5.172 5.844-6.503L20 7.39V0z"/></svg>
Then give the Menu item a custom class of
trend-menu-icon
This article explains how:https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Then add this CSS to your site:
.trend-menu-icon { pointer-events: none; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 17, 2020 at 5:05 am #1446954Rohan Verma
All is fine but the trending icon hover and click is still appearing even after applying the css code. Please check.
September 17, 2020 at 6:27 am #1447047David
StaffCustomer SupportYou have a missing closing bracket
}
in your CSS – see below and add the bracket where i have commented:@media (max-width: 768px) { table, th, td { font-size: 14px; width: auto!important; } } /* add bracket here */ .trend-menu-icon { pointer-events: none; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 18, 2020 at 6:10 am #1448545Rohan Verma
Thanks it’s working.
Now, how can I add divider between secondary menu items?
September 18, 2020 at 7:14 am #1448625David
StaffCustomer SupportTry this CSS to add the dividing line:
.secondary-navigation .main-nav ul li:not(.last-child):not(.first-child) { border-right: 1px solid #fff; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 19, 2020 at 7:08 am #1449842Rohan Verma
I want the same divider as this site using. (https://www.dexerto.com/)
September 19, 2020 at 8:03 am #1450048David
StaffCustomer SupportTry this instead:
.secondary-navigation li:not(:first-of-type):not(:last-of-type) { position: relative; padding-right: 20px; } .secondary-navigation li:not(:first-of-type):not(:last-of-type):after { content: '•'; position: absolute; top: 0; right: 10px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 20, 2020 at 12:00 am #1450571Rohan Verma
Yes. Seems good but not appearing for the mobile version.
-
AuthorPosts
- You must be logged in to reply to this topic.