Problems with the logo while using the creative menu style

rinneh

Hello,

I am currently working on a website and I wanted to work with a custom logo height. So I adjusted the CSS to get this style > [Links visible only for registered users]

The CSS 

"#Top_bar #logo { margin: 0px; padding: 0px 0px; height: 345px  !important; }

#Header_creative #Top_bar .logo {

  float: none;

  text-align: center;

  margin: 0px 0;

}"

But this causes problems while adjusting the viewport to a tablet or mobile workspace. 

My question is how can I use a custom logo specifically for smaller viewports where I don't break the menu height as well?

I find this to be quite a bit limitation that the creative menu doesn't support different logo aspects than the usual wide but low logo's.

With best regards,

Albert

Hi,

you should wrap above custom css into media query rules. Under [Links visible only for registered users] you can check what viewports we use so you can wrap your code into media queries responsible for desktop only.

Thanks!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rinneh

Ok, that will take some time to get into. Because I am not that strong with CSS and this is a new way of defining the responsive parts for me.

But while reading the latest version changelog I saw it was possible to upload a mobile only logo. But I cannot find that function after updating? Where do I have to look for that?

Albert

This new option is under Theme options > Responsive section.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rinneh

thank you for pointing that out, I was looking at the logo setup page itself. 

But I dont fully understand your tip regarding the media queries. WHat must I do to adjust the menu/logo div size for each viewport? I can do it directly i the CSS itself. But defining it into a custom css is something I am struggling with.

Albert

It means that you must wrap code into media queries to apply css for the right screen sizes. For example, if you want above css to work only on large desktop screens, you should use the code as below:

@media only screen and (min-width: 1240px) { 

    #Top_bar #logo { margin: 0px; padding: 0px 0px; height: 345px  !important; }

    #Header_creative #Top_bar .logo {
      float: none;
      text-align: center;
      margin: 0px 0;
}
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rinneh

Thank you very much for your help. This indeed fixed my problem and also gave me more insights in how the code works.

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next