-
Posts
-
my website is https://longislandintervention.com
I have a single one page (landing page) design for my website, therefore the mobile menu is hidden and not visible.
I have a header widget which is visible in desktop but right now it’s hidden on mobile via this css:
@media only screen and (max-width: 767px) {
#header .widget { display: none !important; }}
}It’s hidden because it’s not RESPONSIVE on mobile, see my attached screenshots for reference. I need it to be in the spot where the mobile menu button was (right of logo) as shown in my first screenshot. Also, it is showing very small, is there a way to make it display a little larger?
Can you please help me make the header widget responsive and to be to the right of the logo across all mobile devices? I’ve attached my WP login in private.
THANK YOU!
Hey zohar2014,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { #header .widget { top: 50px; } }Best regards,
RikardAttached photo (2/2) shows how it now looks on galaxy s8
Also, the image doesnt stay in the header, it follows with scroll (photo 1/2)
i dont understand why this is happening :(
Hi zohar2014,
Please use this code instead.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { #header .widget { left: 60%; margin-right: 15px; top: 7px; position: absolute; } }If you need further assistance please let us know.
Best regards,
VictoriaThe placement is now perfect, you guys are miracle workers!!!!!!!!!!!!!!!!!!!!!!!!!
But there is one last issue, the header widget image is very small in the mobile view, there is so much space around it, while the logo is filled out, is there any way to make the header widget be bigger in mobile, please?
Hi,
The size is that based on the logo position.
A different size would make issues with the logo, so better to keep it there :)Best regards,
BasilisI found a solution but it’s not working. I want to use a different header widget for mobile only while keeping my current header widget for desktop. I’ve named the new widget “mobile” while the other one is named “header” and targeted via css the desktop header widget to disappear while keeping the new mobile widget, but they both disappear and now there are none in mobile. This is the CSS:
@media only screen and (max-width: 767px) {
#header .widget { display: none !important; }}
}@media only screen and (max-width: 767px) {
#mobile .widget {
left: 60%;
margin-right: 15px;
top: 7px;
position: absolute;
}
}I will also need the new mobile widget to NOT display in desktop as they are overlapping now, but if i try making it display: none via css, both widgets disappear (same problem as above)
please help!
can you guys tell me how can I target via CSS to have the header widget titled “mobile” only display on mobile and have the header widget titled “header” only display on desktop, please?
Hi,
I see you have 2 header widgets however I couldn’t see the widget titled mobile, just let us know which one do you want to show on mobile and which to show on desktop and we will give you a css code that should work, as for the screenshot, it seems to be messed up, you can add this css code to fix it:
#header #media_image-3 { left: 82%; padding-top: 10px; } #header #media_image-3 img { max-height: 65px; width: auto; } Best regards, NikkoI was hoping to receive the answer for what i asked as the website owner is going crazy but thats not what i asked so its a wasted response Nikko, now i have to wait an average of 12 hours for another response :(
However, by using your code i was able to target the CSS selector for the header widget i want to *not* show on desktop by using this:
@media only screen and (min-width: 767px) {
#header #media_image-3 {
display: none;
}
}BUT the header widget i need to disappear in mobile is still there, because i dont know how to find the CSS selectors, i dont know how you guys looked up the 1st widget to be #media_image-3 can you just PLEASE tell me how you do that, thanks!!!
See my screenshots, i cant be any more clear:
I figured out the CSS selector for the other widget is #media_image-2 and now mobile and desktop versions look correct each displaying their corresponding widgets
These are all the CSS i have for the header widgets, could you guys check if nothing is conflicting or excessive, or wrong (causing placement/responsiveness issues) for what i am trying to achieve? i ran the website through responsinator.com and checked two phones and it looks correct. thanks so much:
#header .widget {
left: 65%;
padding-top: 5px;
position: fixed;
}@media only screen and (max-width: 767px) {
#header .widget {
left: 60%;
margin-right: 15px;
top: 7px;
position: absolute;
}
}@media only screen and (min-width: 768px) {
#header #media_image-3 {
display: none;
}
}@media only screen and (max-width: 767px) {
#header #media_image-2 {
display: none;
}
}Hi,
Glad that you figured it out, I have checked it with my mobile device and desktop and it seems everything is good on my end. Let us know if you need further assistance.
Best regards,
NikkoThank you Nikko, sorry i got a little upset in my previous response. This topic is now solved. I’ve started another topic that is awaiting for response over 15 hours, could perhaps take a look? Thanks so much.
- The topic ‘Need HELP with mobile header’ is closed to new replies.