Suits Theme – Header Not Responsive… yet
-
I desperately wanted to work. I only took the hover effect away because I didn’t think anyone was going to respond. Currently the hover effect is not in place. I’d love to use the CSS you provided while also having the hover effect in the header.
-
Also the CSS you just had me use seems to shrink the size of my header down from what it previously was.
-
Use the last example I gave (including getting rid of the old “site-header” stuff), and then add this:
.site-header:hover { background: #000 url(https://fivestarsoda.files.wordpress.com/2015/02/header-final-scroll.jpg?h=175) center no-repeat; background-size: contain; }Probably best to add it just below the “.site-header” block in the example.
If you get stuck, save changes and let me have a look.
-
Also the CSS you just had me use seems to shrink the size of my header down from what it previously was.
I didn’t remember what it previously was. You can adjust the height values, let’s get the hover thing working first though. I think too many changes all at once is making it harder to follow. :)
-
<3<3<3 Hover effect is back!
I didn’t remember what it previously was. You can adjust the height values, let’s get the hover thing working first though. I think too many changes all at once is making it harder to follow. :)
Ok, I think I adjusted the header height to my liking. The only problem I have left is this: when you go into tablet and mobile views, the header has a decent amount of black space between it and the nav bar. I’d like to try to eliminate that space on tablet and mobile views. I’ll do whatever it requires.
-
-
I’d like to try to eliminate that space on tablet and mobile views.
Let’s modify the media queries to set the header height to auto. So here is the full CSS.
@media screen and (max-width: 640px) { .site-header { height: auto; } .site-header .home-link { min-height:140px } } @media screen and (max-width: 480px) { .site-header { height: auto; } .site-header .home-link { min-height:105px } }This same as what @designsimply provided above plus the following rule:
`.site-header {
height: auto;
}`Give it a try and see how it goes.
-
staff-happychia – This definitely helped. However, there’s still a small amount of black space showing on tablet and mobile in between the header and nav bar. When I shrink my browser very small on desktop, I also start to see it there too. I’m not sure what the deal is there. It’s really close, but I’d love to totally eliminate it since so many people will be viewing this on their phones. I’m sorry to be such a pain. You guys have both been a tremendous help so far.
-
-
I am really sorry I could not help you with this despite my best intention to help you. Sorry to let you down.
-
staff-happychia – Don’t be sorry! Your solution did help improve the problem. It just didn’t totally eliminate it. Maybe @designspecial or someone else can close the case!
-
-
staff-happychia – I have a different idea. Is it possible to have a different header ONLY for the mobile version? Same question for anyone reading this. If so, I’d want to use this image for only mobile: https://fivestarsoda.files.wordpress.com/2015/02/square-logo.jpg
-
However, there’s still a small amount of black space showing on tablet and mobile in between the header and nav bar. When I shrink my browser very small on desktop, I also start to see it there too. I’m not sure what the deal is there. It’s really close, but I’d love to totally eliminate it since so many people will be viewing this on their phones.
The black space is happening because you have to manually pick a height because of how the image is being added as a background. Basically, what’s happening is you are trying to make the header do something it wasn’t designed to do and the only way to really get close is with an approximation. The media queries are an approximation.
In your case, you might like to anchor the background image to the bottom, that way the extra black stuff will be at the top and blend in nicely with the image you’re using. To try it, add this:
.site-header { background-position: bottom; }Find this line:
background: #000 url('https://fivestarsoda.files.wordpress.com/2015/02/header-final-scroll.jpg?h=175') center no-repeat;And change “center” to “bottom”
-
Is it possible to have a different header ONLY for the mobile version?
You could do that. Media queries were made for targeting specific screen sizes. You should read: http://en.support.wordpress.com/custom-design/custom-css-media-queries/
The image you included looks like it has too much empty space in it to work well, but here is a media query example you can try:
@media screen and (max-width: 480px) { .site-header, .site-header:hover { height: 300px; background-image: url(https://fivestarsoda.files.wordpress.com/2015/02/square-logo.jpg); } }That needs to replace the @media query for max-width: 480px from your custom CSS and also needs to be at the bottom of the custom css to work correctly. Media queries usually work best placed at the bottom of other CSS.
-
That seems to work. However, it takes away the hover effect I had on my Desktop header. Does the CSS change that? Or is the CSS I have just out of order, and that’s what’s causing it. All I need is that hover effect back and I’m set.
-
Also, I did try moving around the media queries, including putting them at the bottom and even rearranging them at the bottom, but I still couldn’t get the hover effect back. At this point though, I’m guessing (hoping) that’s a pretty simple fix.
-
That seems to work. However, it takes away the hover effect I had on my Desktop header. Does the CSS change that?
It shouldn’t. Did you change something else in the CSS perhaps?
-
Oh, ok, you reordered some things. Yes, the order matters a lot. :) Try making sure the media queries are at the bottom and in order from the largest max-width to the smallest (i.e. the max-width: 480px media query goes last).
-
Ok got all of that working. Totally separate issue. The nav bar isn’t functioning properly on tablet and mobile. Some of the navigation options can’t be seen in these modes and there’s no ability to scroll up or down to get to them.
Can something be done to fix this?
- The topic ‘Suits Theme – Header Not Responsive… yet’ is closed to new replies.
WordPress.com Forums 
