I need to access the header CSS so that I can give it a negative margin-bottom (so that the logo image will extend beyond the background). what is the class/id that I can use to do so in the custom css section?
Basically what I want to do is have the white header background end at where the red/orange line on the picture is. That way the logo would be extending beyond the header background.
I figure I could do this with custom css, but I do not know what class the header background is defined by.
I dug through the CSS and was able to find the #site-header property, which I was able to add a negative margin-bottom to produce the effect I wanted. Note that I am modifying the custom.css file on the child theme. I also used some media queries to adjust for tablet layout. However I cannot find the property that defines the sticky (or absolute) header. When I scroll down the background reverts back to the default (however my repositioning of the text is still there). How can I also adjust the sticky header to produce the same effect as I did with the fixed one? See pics below.
I am also having a position issue on the logo where you resize the window to the tablet layout, the logo and links get pushed 20px or so to the right. I need to fix this as well.
Yes that is almost there, I would like to have it maybe 30 px higher. It should also be that way on the other responsive sizes. When you resize the window it goes back to the default. I'm not sure what is causing it, but it keeps getting pushed to the side.
The picture is the end result that I am looking for.
So I was able to get the header working with what you did, but I have one more issue. I need to move the hamburger icon upwards about 15 px on the small layout. I can't seem to figure out how to do that.
I have a very picky client... The other, more major issue is that on safari browsers, the centered header loads aligned to the left side of the browser. The header always snaps back into place after resizing the window. Obviously this is not okay for my client. Can you help me fix that?
I want to leave the tablet layout as it was. The fix is simply for the phone layout. I had it displaying the links on tablet before with no logo, and I would like to keep it that way. It now shows the hamburger menu on tablet display. Did you change some header settings in the theme options? I deleted the reference to @media(max-width: 768px) but the tablet layout still appears with the hamburger icon. However your fix does work for the mobile phone layout.
As for the safari header problem, this is what happens every time I load the page on safari (see pics). I am on Mac and have a 2880 x 1800 resolution display. When I resize the browser window, it snaps back into place. It also happens on my iPad Pro safari app (when in landscape, it displays the desktop layout). The iPad Pro also has a very high resolution screen. My thought is that maybe the high DPI resolution is causing it? You can see it in the picture below.
I was able to revert the tablet layout and that is all good now. Thanks for the hamburger icon fix. Now all I still need to investigate for now is that safari header problem.
Unfortunately, I don't have the opportunity to test on a real device. On the browser stack, I didn't see the problem. We can contact you at the TeamViewer and you show the problem
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).
Sure, we can do that. So I also checked one of the Gem demo sites and it was having the same issue. It seems to happens on safari with centered headers where the logo is in the middle of the links. You can see it in the pic below. I haven't yet checked on safari with a 1x resolution screen. What time is good for you? It seems we have a significant time difference. I am GMT Central Time
Hello,
I need to access the header CSS so that I can give it a negative margin-bottom (so that the logo image will extend beyond the background). what is the class/id that I can use to do so in the custom css section?
Hi,
not quite sure what do you mean. Can you pls provide more details (screenshots)?
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).
Regards Sergio Codex.
Basically what I want to do is have the white header background end at where the red/orange line on the picture is. That way the logo would be extending beyond the header background.
I figure I could do this with custom css, but I do not know what class the header background is defined by.
I dug through the CSS and was able to find the #site-header property, which I was able to add a negative margin-bottom to produce the effect I wanted. Note that I am modifying the custom.css file on the child theme. I also used some media queries to adjust for tablet layout. However I cannot find the property that defines the sticky (or absolute) header. When I scroll down the background reverts back to the default (however my repositioning of the text is still there). How can I also adjust the sticky header to produce the same effect as I did with the fixed one? See pics below.
HI!
pls. share the wp-admin access, we'll check
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).
Regards Sergio Codex.
I am also having a position issue on the logo where you resize the window to the tablet layout, the logo and links get pushed 20px or so to the right. I need to fix this as well.
HI,
I'm not quite sure what you want to get, but I made you an example http://launchspacegroup.com/#welcome
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).
Regards Sergio Codex.
Yes that is almost there, I would like to have it maybe 30 px higher. It should also be that way on the other responsive sizes. When you resize the window it goes back to the default. I'm not sure what is causing it, but it keeps getting pushed to the side.
The picture is the end result that I am looking for.
The text should also be repositioned so that it is centered on the now smaller header
Sorry to bombard you with requests, haha.
So I was able to get the header working with what you did, but I have one more issue. I need to move the hamburger icon upwards about 15 px on the small layout. I can't seem to figure out how to do that.
I have a very picky client... The other, more major issue is that on safari browsers, the centered header loads aligned to the left side of the browser. The header always snaps back into place after resizing the window. Obviously this is not okay for my client. Can you help me fix that?
HI,
1) The problem with the hamburger menu
pls. use following CSS:
@media(max-width:768px) { #primary-navigation .menu-toggle { display: inline-block; top: -35px !important; } } @media(max-width:425px) { #primary-navigation .menu-toggle { display: inline-block; top: -25px !important; } }2)I could not reproduce the problem in a safari. Can you pls provide more details (screenshots)?
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).
Regards Sergio Codex.
Sergio,
I want to leave the tablet layout as it was. The fix is simply for the phone layout. I had it displaying the links on tablet before with no logo, and I would like to keep it that way. It now shows the hamburger menu on tablet display. Did you change some header settings in the theme options? I deleted the reference to @media(max-width: 768px) but the tablet layout still appears with the hamburger icon. However your fix does work for the mobile phone layout.
As for the safari header problem, this is what happens every time I load the page on safari (see pics). I am on Mac and have a 2880 x 1800 resolution display. When I resize the browser window, it snaps back into place. It also happens on my iPad Pro safari app (when in landscape, it displays the desktop layout). The iPad Pro also has a very high resolution screen. My thought is that maybe the high DPI resolution is causing it? You can see it in the picture below.
I was able to revert the tablet layout and that is all good now. Thanks for the hamburger icon fix. Now all I still need to investigate for now is that safari header problem.
Hi,
Unfortunately, I don't have the opportunity to test on a real device. On the browser stack, I didn't see the problem. We can contact you at the TeamViewer and you show the problem
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).
Regards Sergio Codex.
Sure, we can do that. So I also checked one of the Gem demo sites and it was having the same issue. It seems to happens on safari with centered headers where the logo is in the middle of the links. You can see it in the pic below. I haven't yet checked on safari with a 1x resolution screen. What time is good for you? It seems we have a significant time difference. I am GMT Central Time
I just checked and it seems to happen on all safari browsers, regardless of the screen dpi.
HI,
Thanks for the information, this is a global bug, we fix it with the next update of the theme.
Please create a separate ticket with this problem.
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).
Regards Sergio Codex.
Will do
Created the ticket for the bug, you can close this one now. Thank you for assistance with my other issue.