[Resolved] logo margin is not set as per container space

[Anil]

Hi

logo margin is not set as per container space, due to this logo is not aligned with page content

I tried following css but behaving erratic between 1300 to 1340 pixel size

@media (max-width: 1300px){
	#site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
	    margin-left: 20px;
	}
}

please advise

[Leo]

Hi there,

Sorry is this CSS added by you currently?

@media (max-width: 1310px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
        margin-left: 10px;
    }
}

[Anil]

No Leo.

I just checked that css you mentioned here is under “generate-navigation-branding-inline-css”

I checked in customizer, there is no such setting….

Please guide further…

[Anil]

Hi
I changed the container width to 1240 then it is generating automatically following css

@media (max-width: 1250px){#site-navigation .navigation-branding, #sticky-navigation .navigation-branding{margin-left:10px;}}

Similarly happening with width 1300, its generating css

@media (max-width: 1310px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
        margin-left: 10px;
    }
}

something happening with generate-navigation-branding-inline-css…

I believe Tom can tell what’s happening in functions at what level ???

[Leo]

Did you change the setting here?
https://docs.generatepress.com/article/mobile-navigation/#using-gp-premium

Let me know 🙂

[Anil]

No Leo, I just re-checked it is default as 768px

[Anil]

I just re-created the navigation bar and the result is same.

I believe “generate-navigation-branding-inline-css” function has something which adds that particular media call adding 10px in container width….

[Leo]

Ok that CSS is just adding some margin to the left of the logo so when the screen width is smaller than the container width so the logo doesn’t position right along the edge of the screen.

This CSS should work with your current set up:

@media (max-width: 1250px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
        margin-left: 20px;
    }
}

Let me know if this makee sense 🙂

[Anil]

Thanks, following css is helping

.main-navigation:not(.grid-container):not(.mobile-header-navigation) .inside-navigation.grid-container .navigation-branding
{
   margin-left: 20px;
}
@media (max-width: 1250px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
        margin-left: 20px;
    }
}

[Leo]

Glad to hear 🙂

[Author]

Posts