How to Add Logo to Center of Top Bar

Please provide a link to a page on your site where we can see this. Thanks.

@sterndata Website

Which one of all do you mean a top banner to check if there’s a way?

Best regards,
Konstantinos

@xkon
2 is not important.I only need to add a logo to 1.(example)

You will have to find in your code where that bar is generated and alter the code a bit. Either that or inject the alterations with jQuery when the page loads.

Either way your bar there is called top-bar and it is constructed like this

<div class="top-bar ">
    <div class="container">
        <div class="row">
			<div class="col-md-12 col-sm-12">
				<p></p>
            </div>
		</div>
		<div class="col-md-17 col-sm-17">
			<div id="menu-social" class="menu"> ICONS HERE </div>
		</div>
    </div>
</div>

You should change it to:

<div class="top-bar ">
    <div class="container">
        <div class="row">
			<div class="col-md-12 col-sm-12">
				<p></p>
            </div>
		</div>
		<div class="col-md-4 col-sm-12">
		</div>
		<div class="col-md-4 col-sm-12" style="text-align:center;">
			LOGO HERE
		</div>
		<div class="col-md-4 col-sm-12">
			<div id="menu-social" class="menu"> ICONS HERE </div>
		</div>
    </div>
</div>

You can use Chromes developer’s tools and inspect the code and change it to what I gave you to understand what you will do.

Unfortunately I can’t know where that code is for you to do it that’s something you have to figure out yourself.

Best regards,
Konstantinos

I think I found it.

   <div class="container">
        <div class="row">
        <?php
        $ocin_top_bar_class = 'col-md-12 col-sm-12';
        if ( has_nav_menu( 'top-bar-menu' ) ) {
            $ocin_top_bar_class = 'col-md-6 col-sm-6';
        }
        ?>
            <div class="<?php echo esc_attr( $ocin_top_bar_class ); ?>">
                <?php $ocin_topbar_text = get_theme_mod( 'ocin_topbar_text', '' ); ?>
                <p><?php echo wp_kses_post( $ocin_topbar_text ); ?></p>
            </div>
            <?php
                if ( has_nav_menu( 'top-bar-menu' ) ) {
            ?>
             <div class="col-md-6 col-sm-6 align-right">
                <?php
                $args = array(
                        'theme_location'  => 'top-bar-menu',
                        'container'       => 'div',
                        'container_id'    => 'top-bar-menu',
                        'container_class' => 'menu',
                        'menu_id'         => 'menu-top-bar-items',
                        'menu_class'      => 'menu-items',
                        'depth'           => 1,
                        'fallback_cb'     => '',
                    );                   
                wp_nav_menu( $args );
                ?>
            </div>
            <?php } ?>
        </div>
<div class="col-md-17 col-sm-17">
                    <?php get_template_part( '/template-parts/social-menu', 'footer' ); ?>
                </div>

But editing this with tools is like making space shuttle for me.There isn’t easier way like CSS code or a plugin? ??

• This reply was modified 7 years, 8 months ago by cwork.
• This reply was modified 7 years, 8 months ago by Steven Stern (sterndata). Reason: fixed backticks

Even if there was a Plugin you would still need to write the code and tell it to inject it in there… But either way I’m not aware of something.

Best regards,
Konstantinos

Although it is not the correct way lets say to go at that extend of helping if you want give me a link to the image you want to add and I’ll fix you a jQuery script so you can simply copy paste it in your footer to inject the image in there. Again though it’s not something I would normally do, but I see that you are struggling and I’m trying to help.

Throw me a link with the image you want as a reply here and I’ll fix you a snippet as soon as possible ??

———- Edit ——–

First of all get This Plugin, it will enable you to add code to your footer section.

Enable it add add to your footer this code :

<script type="text/javascript">
    (function($){
        $(document).ready(function(){
            $('.top-bar .container').html('' +
                '<div class="row"><div class="col-md-12 col-sm-12"><p></p></div></div><div class="col-md-4 col-sm-12"></div>' +
                '<div class="col-md-4 col-sm-12" style="text-align:center;"><img style="height:35px !important; width: auto !important;" src="PUT_YOUR_LINK_HERE" /></div>' +
                '<div class="col-md-4 col-sm-12">' +
                '<div id="menu-social" class="menu">' +
                '<ul id="menu-social-items" class="menu-items nav nav_social"><li id="menu-item-1092" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1092"><a href="https://www.facebook.com/caserollcom/"><span class="screen-reader-text">Facebook</span></a></li>' +
                '<li id="menu-item-1093" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1093"><a href="https://www.instagram.com/case.roll/?hl=tr"><span class="screen-reader-text">Instagram</span></a></li>' +
                '<li id="menu-item-1094" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1094"><a href="https://tr.pinterest.com/caserollcom/pins/"><span class="screen-reader-text">Pinterest</span></a></li>' +
                '</ul>' +
                '</div>' +
                '</div>');
        });
    })(jQuery);
</script>

You only have to replace the PUT_YOUR_LINK_HERE with the URL of the image you want to show for example “https://www.caseroll.com/wp-content/uploads/image-whatever.jpg”.

I’ve tested live this injection and works correctly on my side.

If you want to change the social links in the future you will have to do it through this code though, there’s no other way for that.

————

Best regards,
Konstantinos

• This reply was modified 7 years, 8 months ago by Konstantinos Xenos. Reason: throwing in the code

Thank you very much for your effort @xkon.I’ll take it from here. ??

Awesome, don’t forget to mark the topic as resolved ^_^.

Best regards,
Konstantinos