Arrange header section

Hi,

I'm still working on this page: http://www.sunsidefestival.com/new/
I added a header image and the logo of the festival through FEST -> Layout -> Code for the HEAD section
I ran into two problems:
1) How can I get the logo centered horizontally and vertically on the top of my background image?
2) How can I get that the logo resizes when I minimize the screen to the mobile version of the page?

I added the following code:

Code: Select all

<div class="container-header">
     <div class="gk-header-bg">
          <img src="/new/wp-content/uploads/2015/03/header_small.png">
     </div>
     <div class="gk-header-logo">
          <img src="/new/wp-content/uploads/2015/03/logo_trasparent_small.png">
     </div>
</div>

And this in the CSS:

Code: Select all

.container-header{
   position: relative;
}

.gk-header-bg {
   margin: 0 -10px -10px -10px;
}

.gk-header-bg img{
   width: 100%;
}

.gk-header-logo{
   position: absolute;
   top:0;
}


And one last question: Is it possible to make the main menu centered?

Thanks in advance.

Hi,

Try to add the following code into the theme’s css/override.css file (make sure to enable the “Use the override.css file” option in Template options > Advanced in the WordPress backend)

Code: Select all

.gk-header-logo {
   position: absolute;
   top: -20px;
   left: 46%;
}

#gk-page-top {
   text-align: center;
}

#main-menu {
   display: inline-block;
   float: none;
}


Thank you very much, everything works fine except the logo in the mobile version. It's visualized in normal size below the background image and on the left side.

Thanks!

Try to add following code into css/mobile.css file or into tablet.css file:

Code: Select all

.gk-header-logo {
   max-width: 100px;
   top: -12px;
}

.gk-header-bg img {
   height: 80px
}