Put date line in Nav bar at the same level as menu items.

[Dong]

Hi guys,

I follow this:

https://generatepress.com/forums/topic/add-date-on-navigation-bar/

and was able to put a date line on my Nav bar. How can I make the live share the same level as other menu items?

https://dongknows.com

Specifically, I’d like to have the social icons to be on the right side of the text, on the same line.

Thanks,

-Dong.

[Tom]

Hi there,

Instead of using the Secondary Navigation there, you may want to use the Top Bar widget area.

That way it will all be inline by default.

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dong]

Thanks, Tom. But I already use the Topbar for something else. Anyway to level the two within the Nav?

-Dong.

[Dong]

OK, Tom. I think I got that done with these CSS codes:

.main-nav {
list-style:none;
display:inline;

}
.secondary-navigation ul {
display: inline;
}

Hope that won’t break anything. 🙂

[Tom]

I don’t see any issue with that.

You could also do this:

.secondary-navigation .inside-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dong]

Thanks, Tom. Your code is way better, I use that.

A bit off-topic but since I have you here: I was able to customize the research results using filters, but any way to make the post headlines of search result archives, too? I can do that with CSS or Layout Customization but affect the entire site.

Here’s an example of the search page, you’ll note the headlines are the same as those of all other archive pages:

https://dongknows.com/?s=aimesh

Thanks,

-Dong.

[Dong]

Nevermind, Tom. I figure that out. 🙂

[Tom]

Glad you got it sorted 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dong]

One more question, Tom. It seems each time I move from one tab of the Man Nav to another (like from Home to Review, or How To etc), the secondary Nav changes its size briefly (where font awesome icons line up vertically) before it gets back to the expected size. That doesn’t happen consistently but most of the time. Is there any way to prevent that from happening?

https://dongknows.com/

Thanks,

-Dong

[Tom]

That’s just font icons loading, unfortunately. Try using SVG images instead 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dong]

Got it! How do I add SVG so that the icon’s color will change according to the value of the menu item, the way the fonts do now?

[Tom]

They should do it by default. If not, you can give the SVG elements this attribute: style="color: currentColor;"

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dong]

Do I treat them the way I normal images in regard to putting them on the menu? Or there’s a way to do that similar to Font Awesome?

[David]

Hi there,

you can add them either using <img> HTML – but it won’t allow you to change the colors using CSS for example on hover

The alternative is to open the SVG in a text editor / IDE or an app like this:

https://jakearchibald.github.io/svgomg/

And copy and paste the <svg> markup directly into the Menu Label.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts