Add logo in mobile navigation bar

Can you post a link to your site?

Here’s the source code on the mobile view:

<div class="nav-text">My Topbar Text</div>

What do you have in your sidebar ‘my-post-ads’ widget?

In your original post you said:

I replaced this code in the header.php theme child:

<div class=”nav-text”><!– put your mobile menu text here –></div>

By this:

<div class=”nav-text”><?php dynamic_sidebar(‘my-post-ads’); ?></div>

Maybe instead you replaced it with:

<div class=”nav-text”>My Topbar Text</div>

That would explain why the topbar is showing “My Topbar Text”.

No problem. So were you able to create a dynamic sidebar and get it into the topbar?

There are a couple of different ways to do it covered in these two threads:
https://wordpress.org/support/topic/logo-in-the-topbar?replies=4
https://wordpress.org/support/topic/adding-a-textimage-logo-to-menu-bar-that-shows-only-on-mobile?replies=17

The easiest way to do it is with a menu and css. Then you don’t need to modify any files. So, to have a clean starting point, I would remove the changes in header.php (or just delete the file from your child theme if you haven’t make any other changes), and remove the css you posted above. Then add a menu item to your topbar menu:

Menus – Screen Options enable CSS Classes
Select a Links menu item
URL is your site
Link Text blank
Add to Menu
After adding to menu, open “Menu Item” and set CSS Class to “topbar-logo”
Move it to the top of the menu

Then add the following to your child theme css:

#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover {
  display: block;
  background-image: url(path-to-your-logo-image);
  background-repeat: no-repeat;
  text-indent: -9000px;
  width: 229px;  /* logo width; this may or may not be needed */
  height: auto;
}

Give that a try and let me know if you have any questions.

The process would be the same; you would just add the menu item to your main menu, and maybe use a different class name, and then target the main menu in the css:

Menus – Screen Options enable CSS Classes
Select a Links menu item
URL is your site
Link Text blank
Add to Menu
After adding to menu, open “Menu Item” and set CSS Class to “menu-logo”
Move it to the top of the menu

/* show logo in menu */
#nav-header .nav li.menu-logo a,
#nav-header .nav li.menu-logo a:hover {
  display: block;
  background-image: url(path-to-your-logo-image);
  background-repeat: no-repeat;
  text-indent: -9000px;
  width: 229px;  /* logo width; this may or may not be needed */
  height: auto;
}

I’m not sure which part of the image you’re referring to as the “mobile logo”. Can you post a link to that site? Your current site already has a WebTrickz logo displayed in the mobile view.