Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #20980

    I am having troubles Centering the logo and it staying centered in the page while i change my Browser size.

    It is also not centered on mobile devices . It looks good on a full size desktop screen though .

    Below is the code i used to center the Logo .

    h1.logo {

    left: 50%!important;

    margin-left: -175px!important;

    }

    . I also want to drop the menu under the logo and i want both to be centered . But im not sure where to start there.

    The website is Wickedbroom.com

    Thanks in Advanced .

    #109898

    Hi ceciliekorst,

    Using !important will overwrite the responsive changes later on. Your best route would be to define the width and then use the auto margin trick to center it ( margin:0 auto; ). Then change the width for the other layouts with media queries.

    You can start with:

    #top .main_menu {
    width: 358px;
    margin: 0 auto;
    float: none !important;
    left: auto;
    }
    .logo, .logo a {
    float: none;
    margin: 0 auto;
    }
    #header .container {
    min-height: 100px;
    height: 138px;
    }

    And then add this for the mobile size changes:

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    /*add your mobile css changes here*/

    }

    Regards,

    Devin

    #109899

    Awesome that worked perfectly except the menu is still a little off center .

    Another question i have is it possible to only apply the Css alignment to just the front page ?

    Css -

    .dynamic-column-title {

    display: none;

    }

    .logo a, .logo a img {

    width: 358px;

    height: 80px;

    }

    #top .main_menu {

    width: 358px;

    margin: 0 auto;

    float: none!important;

    left: auto;

    }

    .logo, .logo a {

    float: none;

    margin: 0 auto;

    }

    #header .container {

    min-height: 100px;

    height: 138px;

    }

    #109900

    Yes, you can add .home to each css selector so it only targets the home body class.

    The menu is centered by its width and elements inside so it may need some additional tweaking. The above css is really just to get you started individual adjustment and customization is beyond what we can do via support. Specifically so with a menu centering like this since it matters what the width of the menu is set to and that will change whenever you change the menu.

    Regards,

    Devin

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Having trouble Centering logo and Drop menu under the logo .’ is closed to new replies.