move social icons and search bar to the right in nav menu

  • Resolved klaw718

    (@klaw718)


    10 years ago

    hey there,

    so I’ve been messing with the CSS for a few days and can’t seem to get this quite right. I added a social media widget and search bar to my primary nav using PHP and CSS codes, but everytime I use this code:

    .nav-primary li:last-of-type {
    float: right;
    height: 32px;
    }

    it messes up how my sub-nav menu items look. it makes the one underneath ‘our mission’ under the about us tab go off the page to the left, and the one titled ‘register’ under the forums tab shift to the left of the sub-nav button above it, so they’re not in line with one another.

    I thought the much easier fix would be making the social icons and search bar float to the right than trying to align the sub menu items so I just took out the code above. Does anyone have any ideas on how to make these items float to the right? I’ve tried everything I can think of but I’ll include my code in case anyone has any ideas. Thanks again! Really hope someone can help me here.

    site: https://www.thepeacetribe.com

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter klaw718

    (@klaw718)

    CSS:

    .nav-primary {
    background-color: #663300;
    height: auto;
    }

    .nav-primary aside {
    width: auto;
    display: inline-block;
    height: auto;
    width: 200px;
    }

    .simple-social-icons ul li {
    margin-right: 0 !important;
    }

    .nav-primary .search-form {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    height: auto;
    margin-left: 0px;
    margin-right: 15px;
    }

    Thread Starter klaw718

    (@klaw718)

    PHP:

    // Add Social Widget Area for Primary Nav
    genesis_register_sidebar( array(
    ‘id’ => ‘nav-social-menu’,
    ‘name’ => __( ‘Nav Social Menu’ ),
    ‘description’ => __( ‘This is the nav social menu section.’ ),
    ) );

    // Add Search to Primary Nav
    add_filter( ‘wp_nav_menu_items’, ‘genesis_search_primary_nav_menu’, 10, 2 );
    function genesis_search_primary_nav_menu( $menu, stdClass $args ){
    if ( ‘primary’ != $args->theme_location )
    return $menu;

    if( genesis_get_option( ‘nav_extras’ ) )
    return $menu;

    ob_start();
    echo ‘<li id=”menu-item-4439203″ class=”custom-social menu-item”>’;
    genesis_widget_area(‘nav-social-menu’);
    $social = ob_get_clean();

    $menu_search = sprintf( ‘%s’, __( genesis_search_form( $echo ) ) );

    return $menu . $social . $menu_search;
    }

    Thread Starter klaw718

    (@klaw718)

    i changed the code back so now I’m working on the submenu items. any help would be appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘move social icons and search bar to the right in nav menu’ is closed to new replies.