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

Home Forums Support logo margin is not set as per container space

This topic contains 9 replies, has 2 voices, and was last updated by  Leo 4 weeks, 1 day ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1263678

    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

    #1263962

    Leo Customer Support

    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;
        }
    }
    #1264135

    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…

    #1264264

    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 ???

    #1265023

    Leo Customer Support
    #1265115

    Anil

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

    #1265140

    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….

    #1265239

    Leo Customer Support

    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 🙂

    #1265295

    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;
        }
    }
    
    #1265319

    Leo Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.