Having trouble Centering logo and Drop menu under the logo . « Support Forum | Kriesi.at

Support Forum » Angular

Having trouble Centering logo and Drop menu under the logo .

4 posts from 2 voices

Started 2 months ago by ceciliekorst
Latest reply from Devin
This topic is not resolved

Tags:

ceciliekorst
Member

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 .

Posted 2 months ago #
Devin
Moderator
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
Posted 2 months ago #
ceciliekorst
Member

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

Posted 2 months ago #
Devin
Moderator

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

Posted 2 months ago #