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

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

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
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.