[Resolved] Primary Navigation Alignment left

[Immi]

Hello there,
I want to the primary menu near the logo in a line.

I have achieved it on my another site by help this post https://generatepress.com/forums/topic/primary-navigation-logo-alignment/

but this trick not working on this site https://androidspd.com/

my another site https://firmwaregsm.com/sample-page

[Tom]

I’m not seeing the necessary CSS on the new site.

Try this:

.nav-float-right .inside-header .main-navigation {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.nav-float-right .header-widget {
    top: 0;
}

[Immi]

I put this code in simple CSS, but nothing happens I want to display on this site ** like this site header **

[David]

Hi there,

you have some broken CSS in your Simple CSS – ie this:

@media (max-width: 768px) {
    h1 {
        font-family: Helvetica, arial, sans-serif;
        font-size: 20px;
        font-weight: 600;
    }
    @media (max-width: 768px) {
        .grid-container.yoast-breadcrumb {
            font-size: 11px;
            color: #222;
            font-weight: normal;
        }
        @media (max-width: 768px) {
            .yoast-breadcrumb p {
                margin-bottom: 0;
            }
            .grid-container.yoast-breadcrumb {
                padding: 6px 3px;
            }
            @media (max-width: 768px) {
                .mobile-header-navigation .site-logo.mobile-header-logo im {
                    height: 58px;
                }
                .menu-toggle, .main-navigation .mobile-bar-items a {
                    line-height: 58px;
                }
            }
            .nav-float-right .inside-header .main-navigation {
                float: none;
                display: inline-block;
                vertical-align: middle;
            }
            .nav-float-right .header-widget {
                top: 0;
            }

remove that and replace it with this:

@media (max-width: 768px) {
    h1 {
        font-family: Helvetica, arial, sans-serif;
        font-size: 20px;
        font-weight: 600;
    }
    .grid-container.yoast-breadcrumb {
        font-size: 11px;
        color: #222;
        font-weight: normal;
    }
    .yoast-breadcrumb p {
        margin-bottom: 0;
    }
    .grid-container.yoast-breadcrumb {
        padding: 6px 3px;
    }
    .mobile-header-navigation .site-logo.mobile-header-logo im {
        height: 58px;
    }
    .menu-toggle, .main-navigation .mobile-bar-items a {
        line-height: 58px;
    }
}
.nav-float-right .inside-header .main-navigation {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.nav-float-right .header-widget {
    top: 0;
}

[Immi]

hello Sir,
It worked perfectly, thank you very much for your support. I have another question I’m using the Lightweight Social Icons plugin, and I want to display the social icon on the right corner top of a header. Same as shown in the attached picture below.

**

[David]

Try this:

.header-widget {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    overflow: visible;
}
.header-widget .widget_lsi_widget {
    position: relative;
    margin-left: 0.5em;
    top: -0.25em;
}

[Immi]

Thank You So Much, Sir

[David]

You’re welcome

[Author]

Posts