Redesign header and main navigation problem

  • Resolved Lutfi Hamid

    (@lutfiku)


    6 years, 11 months ago

    Hi all

    I have redesigned my header and main navigation using this code and I got problems.

    .inside-header {
    display: flex;
    align-items: center;
}

nav#site-navigation {
    margin-left: auto;
}

    Here the problems and How to fix it?

    1. Logo and menu.toggle button are not equal, specially when my site is oponed by smartphone

    2. Search button cover menu.toggle button in mobile view

    3. In mobile view, when I click menu.toggle button, height header was changed following the main navigation opened.

    You can see my site to understand what I mean above here https://lutfihamid.com

    I am sorry my english is not good, because I am not native speaker 🙂

    Thank you all

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Tom

    (@edge22)

    6 years, 11 months ago

    Hi there,

    What was the purpose of adding that code? There might be a better solution.

    Let me know 🙂

    Thread Starter Lutfi Hamid

    (@lutfiku)

    6 years, 11 months ago

    Hello @edge22

    I add this to make navigation as header like this https://www.materials.ucsb.edu/

    And I follow this step https://ww.wp.xz.cn/support/topic/free-version-merge-header-logo-with-menu-bar/

    Thanks

    Theme Author Tom

    (@edge22)

    6 years, 11 months ago

    Got it 🙂

    Our pro version has a navigation as header option which does all of this for you with one option in the Customizer.

    Otherwise, let’s try this:

    1. Set your navigation location to below header.
    2. Add this PHP:

    add_filter( 'generate_header_items_order', function( $items ) {
    return array_diff( $items, [ 'logo' ] );
} );

add_action( 'generate_inside_navigation', 'generate_construct_logo' );

    3. Add this CSS:

    @media (max-width: 768px) {
    #masthead .site-logo {
        margin-bottom: 0;
    }

    button.menu-toggle {
        margin-left: auto;
        width: auto;
    }

    .mobile-bar-items {
        position: relative;
        order: 10;
    }
}

.main-navigation .inside-navigation {
    display: flex;
    align-items: center;
    padding: 10px;
}

.main-navigation .site-logo {
    margin-right: auto;
}

.site-header {
    display: none;
}

    Let me know if that does the trick or not 🙂

    Thread Starter Lutfi Hamid

    (@lutfiku)

    6 years, 11 months ago

    Great. It’s work, @edge22

    Thank you so much

    Theme Author Tom

    (@edge22)

    6 years, 11 months ago

    You’re welcome 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Redesign header and main navigation problem’ is closed to new replies.