Trending Section after Main Menu

[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

[Leo]

Hi 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/

[Rohan 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?

[Leo]

That 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/

[Rohan 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

[Leo]

Can 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/

[Rohan Verma]

Yes. Sure.

Here is the site link: https://www.dexerto.com/

[David]

Hi 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/

[Rohan Verma]

All is fine but the trending icon hover and click is still appearing even after applying the css code. Please check.

[David]

You 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/

[Rohan Verma]

Thanks it’s working.

Now, how can I add divider between secondary menu items?

[David]

Try 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/

[Rohan Verma]

I want the same divider as this site using. (https://www.dexerto.com/)

[David]

Try 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/

[Rohan Verma]

Yes. Seems good but not appearing for the mobile version.

[Author]

Posts