[Resolved] Achieve same navigation bar

Home Forums Support [Resolved] Achieve same navigation bar

Home Forums Support Achieve same navigation bar

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2333002
    Rohith

    How to achieve the same navigation bar as in this screenshot (Check PVT)

    #2333174
    David
    Staff
    Customer Support

    Hi there,

    you can add your search and your social icons blocks to a the Header Widget in Appearance > Widgets

    #2333239
    Rohith

    Hello, I have added it as a widget but it is showing in different location. (Check PVT)

    #2333271
    David
    Staff
    Customer Support

    1. Disable the Navigation as Header option in Customizer > Layout > Header.
    2. Set the Customizer > Layout > Primary Nav -> Location to: Float Right.
    3. Add your widgets to the Header Widget ( NOT the Top Bar ).

    #2333303
    Rohith

    The search bar is showing good but it is not looking same as in the target website. How to achieve it?

    #2333312
    David
    Staff
    Customer Support

    You can adjust the secondary navigation height in>> Customizer > Layout > Secondary Navigation –> Menu Item Height.

    What else you need help with ?

    #2333318
    Rohith

    The thing is not about secondary navigation. The search box should be in the center and the size and style should be the same. Please help me with this.

    #2333387
    Fernando
    Customer Support

    Hi Rohith,

    Will you be add Social icons as well? Can you try adding them first, and then we’ll fix the other stuff afterwards?

    #2333691
    Rohith

    I have added the icons but they are not showing properly. Please check mine and target website.

    #2333738
    David
    Staff
    Customer Support

    Add this CSS:

    .header-widget {
        display: flex;
        align-items: center;
        flex: 1;
    }
    .header-widget aside:first-child {
        flex: 1;
        margin-right: 40px;
    }
    .header-widget aside ul li {
        margin-bottom: 0;
    }
    .header-widget .wp-block-search input,
    .header-widget .wp-block-search__button.has-icon {
        border: 0;
    }
    .header-widget .wp-block-search input {
        border-radius: 6px 0 0 6px;
        overflow: hidden;
    }
    .header-widget .wp-block-search__button.has-icon {
        margin-left: 0;
        border-radius: 0 6px 6px 0;
    }
    #2333777
    Rohith

    Worked. Thank you!

    #2333821
    David
    Staff
    Customer Support

    You’re welcome

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.