Logo placement on smaller screen sizes

• dmdstar

  said

  Is it possible to get the logo to stay in the header/slider area on the smaller screen sizes, rather than having it pop out and sit on top?

  Thanks,
  Matt

• jeffw

  said

  HI, Matt.

  This effect is actually a deliberate part of the responsive theme design, however a couple of styles in your Custom CSS box or in your custom stylesheet should achieve what you are after:

  #HeaderContent .logoDefault { display: block !important; }
  #HeaderContent .logoResponsive { display: none !important; }

• dmdstar

  said

  Yup, I understand it’s deliberate, and in most cases that makes perfect sense. However, I chose to use the slider on the homepage and the header image on the other pages as part of the title banner, and for consistency I felt it might look better to keep the header in the same spot.

  Added your code to the custom css, and it’s more-or-less what I thought I wanted, but I guess doesn’t work well with the slider images, so will revert back.

  Another thought… How is the logo size determined for the smaller screen sizes? If I could make it bigger, that might fix my issues as well. The main problem is that it’s sizing the logo too small so it’s almost unreadable.

  Thanks,
  Matt

• dmdstar

  said

  Now that we’re using two different styles of logos (circle for the homepage, and long for other pages, I’m trying to do this thing again with the logo overlapping the slider & banner graphic on responsive widths, just like it does on the regular width.

  The issue I can’t seem to get around is the sizing of the logo. Just using the code you provide above, it keeps the logo the same size, regardless of the responsive size, so on small screen sizes, is much too large.

  Setting a percentage width did no good as it distorted the image for some reason.

  Any idea how I could make the logo responsively resize along with the rest of the theme?

  Thanks!

• jeffw

  said

  Hi, Matt.

  It seems to me that you would have this issue no matter what theme you were using. It’s a generic coding issue, not something that is directly related to the theme. I hope you understand that we are able to provide free theme support in this forum only for issues that are directly related to the Razor theme. Please remember that the support team is not able to help you customise the theme.

• dmdstar

  said

  Um, no… Just about every theme I’ve purchased resizes the logo responsively. Granted, most don’t allow for multiple types of logos like this one does…

  I tried doing it with percentage width, thinking that if I did a max-width, it would work. No dice.

  Essentially, I added the code above to eliminate the normal responsive header thingee, and to keep the standard logos within the header graphic & slider areas. However they do not resize with the screen width. Thus, at mobile width, the circle logo on the homepage takes up the whole slider area, and overlaps the menu.

  There has to be something we can add via css to make this work, but anything I tried made the image distort. I think I may be just be fiddling with the wrong tags or something…

• jeffw

  said

  Please show me how this issue is directly related to the Razor theme (non-customised). If you can convince me of this then I am able to look into the issue for you. In this forum the support team is able to help only with issues that are directly related to the Razor theme.

• dmdstar

  said

  Ok… guess we’re not getting any css pointers then. I may be able to add the logo to the slider and accomplish what I need that way. Revolution Slider is fully responsive with all it’s images, so that should work as long as I can just make the standard logo disappear from the homepage, which shouldn’t be too hard.