Menu icon Foundation
Top-Bar Logo

I'm having trouble adding a background image as a photo to my top-bar. Any help is appreciated!

 <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <?php do_action('foundationPress_layout_start'); ?>
          <nav class="tab-bar show-for-small-only">
            <section class="right-small">
              <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
            </section>
              <section class="middle tab-bar-section">
                 <!--  Top right logo mobile-->
                   <a href="#">
                      <div class="title logo"></div><!-- This one shows up on mobile view-->
                   </a>
              </section>
          </nav>

          <aside class="right-off-canvas-menu">
            <?php foundationPress_mobile_off_canvas(); ?>
          </aside>

        <div class="top-bar-container contain-to-grid show-for-medium-up">
            <nav class="top-bar">
                <ul class="title-area">
                    <li class="name"><a href="#" class="m-desk-logo"></a> <!--  This doesn't show up on desktop view-->
                    </li>
                </ul>
                <section class="top-bar-section">
                    <?php foundationPress_top_bar_l(); ?>
                    <?php foundationPress_top_bar_r(); ?>
                </section>
            </nav>
        </div>
            

         

.m-desk-logo {
  background: url('../assets/img/main-nav-cwk-carrot-logo.png') no-repeat;
    background-size: contain;
    width: 100%;
    display: inline-block;
}
            

         

Thank you!

top-barimagewordpressfoundationPress

I'm having trouble adding a background image as a photo to my top-bar. Any help is appreciated!

 <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <?php do_action('foundationPress_layout_start'); ?>
          <nav class="tab-bar show-for-small-only">
            <section class="right-small">
              <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
            </section>
              <section class="middle tab-bar-section">
                 <!--  Top right logo mobile-->
                   <a href="#">
                      <div class="title logo"></div><!-- This one shows up on mobile view-->
                   </a>
              </section>
          </nav>

          <aside class="right-off-canvas-menu">
            <?php foundationPress_mobile_off_canvas(); ?>
          </aside>

        <div class="top-bar-container contain-to-grid show-for-medium-up">
            <nav class="top-bar">
                <ul class="title-area">
                    <li class="name"><a href="#" class="m-desk-logo"></a> <!--  This doesn't show up on desktop view-->
                    </li>
                </ul>
                <section class="top-bar-section">
                    <?php foundationPress_top_bar_l(); ?>
                    <?php foundationPress_top_bar_r(); ?>
                </section>
            </nav>
        </div>
            

         

.m-desk-logo {
  background: url('../assets/img/main-nav-cwk-carrot-logo.png') no-repeat;
    background-size: contain;
    width: 100%;
    display: inline-block;
}
            

         

Thank you!

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

This will help http://codepen.io/winghouchan/pen/FsydE

The class of title-area shows on both small and larger screens.
Just add you image to that class.