Topbar...

Hi there,

you would need to add your social icons HTML/Shortcode in the first top bar widget, and the rest of the content HTML in the second widget. They'll automatically align right and left.

And to remove the top bar on mobile - add this CSS:

@media(max-width: 768px) {
  .top-bar {
    dispaly: none;
  }
}

Alternatively you can use a Block Element and the GenerateBlocks plugin to create your Top Bar:

https://docs.generatepress.com/article/block-element-overview/

You can use the Hook: generate_before_header to display it in the same place.

And to hide it on mobile - use a Container Block for your top bar content and in Advanced > Additional CSS Class(es) add: hide-on-mobile

Hi David,

I am not much knowledge on coding and can't be done a single of code without help, I totally understand now how to hide on the mobile device the topbar but the basic steps which widget to follow, where and how to add the code, and most importantly what I add into it, Can you please help me out the scratch basic steps to follow, Below the details I would like to add into it.
On the left side Time(Saturday - Thursday 10:00 - 19:00 Friday - CLOSED), Phone Number, Address and on the right side follow us text with 2 Icons of any social media.

Note: I don't want to use the icons from the fonts or google I will add the icons to the media library.

Just send me the steps of the code, I really appreciate it.

Hi there,

If you don't want to use code, you'll want to go the GenerateBlocks route that David mentioned after the CSS here: https://generatepress.com/forums/topic/topbar/#post-1738777

This will allow you to build the top bar visually without needing to rely on any coding whatsoever. Definitely the better route to take if you want to do things with zero code :)