Archived topic
Space too high headers in mobile phone view. Menus are Guilty
11 replies · Started by Alberto on May 19, 2022
I have two headers. In desktop view all is good by in mobile view these headers appears to high because the menus appears drop down but with invisible options. These options are actives and is posible use it...... I would like send some screen captures...... And will be more easy understand me.
Hi there,
can you share a link to the site where i can see the issue?
If you want to share screenshots - you need to save your images on a cloud drive or your WP Media Library and share a URL to the image.
You can use the Private Information field to share any URLs with just the support team
Hi. Thanks for your reply. (too fast). I am very grateful
Web site is under construction (Mode Maintenance) but if you tell me your IP I can setup this address for you can see the website.
I am going to capture the screens and share on a cloud drive.
Please send me your IP adress using the Private Information field, and tell me an adress mail for share the pictures on cloud.
Regards, Alberto
Hi Alberto,
I set the header widget color to blue in developer tool, so that you can see the header widget.
https://www.screencast.com/t/JqQvC3GReoiO
If you don't want it, you can remove it at appearance > widgets.
If you want to keep it, you can change its color at customizer > colors > header > link.
Hello Ying. Thank you very much for your help....
I think my first problem is language because my level of English languaga is too low..... I amo sorry so much :-(
The problem is the high of the bars...... These are to high and take up a lot of vertical space.
If I remove the widget, the menu disappears.
So you want the menu to be kept?
Then can you let me know what's the layout you are looking for?
If you can make a markup image, it will be helpful!
Good morning Ying. Thank you so much for your answer.
I had created a folder in DropBox with the pictures..... This is the link: (Private information area)
I am sure you will understand me better.
Regards,
Alberto
Your site has a Header Widget in Appearance > Widgets, it doesn't look like you need it - so you can delete that widget.
And you have a top bar that needs to hide on Mobile. Add this CSS to do that:
@media (max-width: 768px) {
.top-bar {
display: none;
}
}
Hello David, Perfect..... Fantastic solution but the other header??
Link with capture in Private area.
Thanks
Alberto.
In Appearance > Widgets --> Header widget there is widget - do you need it? As it cannot be seen? If you don't need it then delete it.
If you do need it the change the above CSS to:
@media (max-width: 768px) {
.top-bar, .header-widget {
display: none !important;
}
}
READY!!!!
Thanks your your support.
Regards,
Alberto.
Glad to be of help