- This topic has 21 replies, 3 voices, and was last updated 3 years, 7 months ago by Leo.
-
AuthorPosts
-
September 14, 2020 at 1:03 pm #1443151Rohan 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 #1443168LeoStaffCustomer 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/September 15, 2020 at 9:37 am #1444494Rohan VermaSorry 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 #1444505LeoStaffCustomer 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/September 15, 2020 at 1:30 pm #1444831Rohan VermaOh 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 #1444857LeoStaffCustomer SupportCan you link me to the site where the screenshot is taken?
September 16, 2020 at 3:52 am #1445431Rohan VermaYes. Sure.
Here is the site link: https://www.dexerto.com/
September 16, 2020 at 6:20 am #1445625DavidStaffCustomer 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; }
September 17, 2020 at 5:05 am #1446954Rohan VermaAll 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 #1447047DavidStaffCustomer 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; }
September 18, 2020 at 6:10 am #1448545Rohan VermaThanks it’s working.
Now, how can I add divider between secondary menu items?
September 18, 2020 at 7:14 am #1448625DavidStaffCustomer 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; }
September 19, 2020 at 7:08 am #1449842Rohan VermaI want the same divider as this site using. (https://www.dexerto.com/)
September 19, 2020 at 8:03 am #1450048DavidStaffCustomer 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; }
September 20, 2020 at 12:00 am #1450571Rohan VermaYes. Seems good but not appearing for the mobile version.
-
AuthorPosts
- You must be logged in to reply to this topic.