Creative Header: problem with vertical logo and responsive menù


Hi,

in our test site we have a visualization/responsive problem when we use the creative header (always open) and a vertical bigger logo than the normal size.

Here you can see the site: http://rrgroup.web-elettronica.eu/

Here there is my  custom CSS: 

---------------------------------------------------------------

@media only screen and (min-width: 400px) {
#Top_bar #logo { height : 491px !important;}
}

---------------------------------------------------------------

I see the responsive problem around the iPad size of the screen (1024x768 and 768x1024) and near the 480x640 size. I think is an error because i can't find the correct rules in my custom CSS. My idea is to have "the left column" menù with the bigger logo when the device is bigger, and when is small i want the normal responsive meù. Is it possible? Are there another best solution?

Thanks a lot...


Comments

  • Hi,

    the only solution we have is to increase value for min-width in above css. This is the only solution we got in this case.
  • Ok, thanks so i'm in the correct way to resolve it.

    I think that the first rule doesn't work well with the second independently of the min-width... try to see my link in this site http://mattkersley.com/responsive/ or try to play with the small/bigger  windows in you browser, so you can see the error ... i think, the second rule is always active, also with the "small/responsive" menù, because i see the first part of the page very very under the menù. 

    But, there isnt' another solution to have a bigger vertical logo?
  • We know what you mean very well but like we wrote, you need to increase the value of min-width attribute. Instead of 400px, set 1024px for example or even larger screens if this won't be enough. Except that, we do not have other solution as any other will requires files customization.
  • Ok, thanks... maybe i have another solutions...

    Now i have insert the logo inside the first slot of the "left" menù, and work well...

    After i have insert this rule in my custom CSS:

    -----------------------------------------
    @media only screen and (min-width: 1240px) {
    .logo  { display: none !important; }
    }
    -----------------------------------------

    So, in the bigger screen i see the logo thanks the principal menù (with the special rule i hide)... and in the smaller screen i see the logo that i insert in the be theme options...

    I have wrote this solution so somebody else can use it...

    What do you think? 
  • If it works as you expect it means that your solution is good :)
  • Ok, thanks for the support!  ^:)^
Sign In or Register to comment.