Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 3, 2015 at 8:46 pm #390354
    surfersp

    dear moderators

    I would like the header logo which has the dimension of 485×64 pixels to become fluid so it fits nicely next to the menu on all screen sizes and also have it vertically centered, could you please show me what css to add.

    thank you.

    • This topic was modified 9 years, 9 months ago by surfersp.
    February 4, 2015 at 12:03 pm #390672
    surfersp

    I managed to figure the first part out my self (example) by adding this, 

    .logo {
position: relative;
display: block;
width: 35%;
max-width: 485px;
height: auto;
text-align: center;
}
.logo a {
display: inline-block;
vertical-align: middle;
}

    I have also activated letting logo and menu adapt to browser window under header options, this gives me a bit more space to work with at smaller screen sizes…. and from 989px and under I want the responsive mobile menu activated which I have selected under the mobile header options. But a problem I’m having is that the logo isn’t centered between 768 and 989 pixel screen sizes and also the header bar doesn’t keep the same fixed height after scrolling like in mobile view.

    please advise. thank you.

    • This reply was modified 9 years, 9 months ago by surfersp. Reason: still facing a few problems!!
    February 5, 2015 at 2:24 pm #391331
    Yigit

    Hey!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 989px) and (min-width: 768px) { 
.responsive .logo img {
top: 10px;
}}

    Seems like you figured out the rest. I tried resizing browser window and checked your site on my iphone and could not see an issue

    Cheers!
    Yigit

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.