Menu icon Foundation
different styling for top-bar-left and top-bar-right - Foundation WP

Hello,

Is there a simple way to have different styling for the top left and top right menu? (SASS / CSS)? I'm using the Foundation Wordpress starter theme.

I tried different things, but nothing seems to work.

Can we declare something in the _settings.scss that can customize only the left or right top bar?

<div class="top-bar-container contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation">

        <ul class="title-area top-bar-<?php echo apply_filters( 'filter_mobile_nav_position', 'mobile_nav_position' ); ?>">
            <li class="name">
                <h1><a href="<?php echo home_url(); ?>"><img src="/wp-content/themes/FoundationPress-master/assets/images/logoheader.jpg"></a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
        </ul>

        <section class="top-bar-section">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
        </section>

    </nav>

</div>
            

         

wordpress

Hello,

Is there a simple way to have different styling for the top left and top right menu? (SASS / CSS)? I'm using the Foundation Wordpress starter theme.

I tried different things, but nothing seems to work.

Can we declare something in the _settings.scss that can customize only the left or right top bar?

<div class="top-bar-container contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation">

        <ul class="title-area top-bar-<?php echo apply_filters( 'filter_mobile_nav_position', 'mobile_nav_position' ); ?>">
            <li class="name">
                <h1><a href="<?php echo home_url(); ?>"><img src="/wp-content/themes/FoundationPress-master/assets/images/logoheader.jpg"></a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
        </ul>

        <section class="top-bar-section">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
        </section>

    </nav>

</div>
            

         
Jeremy Englert almost 4 years ago

You can target those sections using ".top-bar-section .left" or ".top-bar-section .right".

John B-S almost 4 years ago

I tried using ".top-bar-section .left" or ".top-bar-section .right" and it does not work. The only CSS code that is capable of doing something seems to be ".top-bar-section ul li>a", but it act on both menus.

I can see in the navigation.php file that the class for these menus are "top-bar-menu left" and "top-bar-menu right" but no change seems to work when I try to call them in the global.scss file.

/**
 * Left top bar
 * http://codex.wordpress.org/Function_Reference/wp_nav_menu
 */
if ( ! function_exists( 'foundationpress_top_bar_l' ) ) {
  function foundationpress_top_bar_l() {
      wp_nav_menu(array(
          'container' => false,                           // Remove nav container
          'container_class' => '',                        // Class of container
          'menu' => '',                                   // Menu name
          'menu_class' => 'top-bar-menu left',            // Adding custom nav class
          'theme_location' => 'top-bar-l',                // Where it's located in the theme
          'before' => '',                                 // Before each link <a>
          'after' => '',                                  // After each link </a>
          'link_before' => '',                            // Before each link text
          'link_after' => '',                             // After each link text
          'depth' => 5,                                   // Limit the depth of the nav
          'fallback_cb' => false,                         // Fallback function (see below)
          'walker' => new Foundationpress_Top_Bar_Walker(),
      ));
  }
}

/**
 * Right top bar
 */
if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
  function foundationpress_top_bar_r() {
      wp_nav_menu(array(
          'container' => false,                           // Remove nav container
          'container_class' => '',                        // Class of container
          'menu' => '',                                   // Menu name
          'menu_class' => 'top-bar-menu right',           // Adding custom nav class
          'theme_location' => 'top-bar-r',                // Where it's located in the theme
          'before' => '',                                 // Before each link <a>
          'after' => '',                                  // After each link </a>
          'link_before' => '',                            // Before each link text
          'link_after' => '',                             // After each link text
          'depth' => 5,                                   // Limit the depth of the nav
          'fallback_cb' => false,                         // Fallback function (see below)
          'walker' => new Foundationpress_Top_Bar_Walker(),
      ));
  }
}


Jeremy Englert almost 4 years ago

Try ".top-bar-section .right ul li > a"