Problems with the logo while using the creative menu style

rinneh · July 2015

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 > http://www.ydengroup.co.uk/ydentest/home-ver2/

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 · July 2015

Hi,

you should wrap above custom css into media query rules. Under http://www.ydengroup.co.uk/ydentest/wp-content/themes/betheme/css/responsive.css?ver=8.8 you can check what viewports we use so you can wrap your code into media queries responsible for desktop only.

Thanks!

rinneh · July 2015

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 · July 2015

This new option is under Theme options > Responsive section.

rinneh · July 2015

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 · July 2015

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

rinneh · August 2015

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

Albert · August 2015

You're welcome

Problems with the logo while using the creative menu style

Comments