-
-
Dear Team,
I created a nice header with the Specular template. It looks great on a computer screen and on a mobile screen. But when the screen is a little smaller the header gets all messy. The menu goes into the slider and the thin grea beam above the menu is bleeding into the menu. All in all it does not look good anymore.
Here is the link to the site: https://netzbekannt.de/
What can I do about that?
Thank you,
Gabriel
-
Hi Gabriel,
I am having similar issues at the moment when screen size changes. They will likely ask for your wordpress login details, as it seems they fix the issues on a case-by-case basis, rather than at the theme level.
I have been waiting for a few days now for this to be fixed so I will keep checking back here in case you hear the fix before I do.
Good luck!
-
-
Hello,
@Rednown,
The responsive mode includes some predefined screen dimensions, the smartphones / tablets / laptops. Whom all have fixed dimensions that are all covered up in theme styles.
Your site looks ok when viewed in iPhone / iPad.
When you re-size the browser to your wish, it will eventually, have in a time, the width that no device has. Usually these do not pose any issue on the site as it is usually accessed by one of these devices, however if you want to avoid it, then please add this code into your custom css box:@media (max-width: 1100px){ nav .menu > li { padding-right: 5px; padding-left: 5px; } }
@HannahTK,
Your site has different issues, that are not caused by the theme. Your case is different from the present customer. Please refer to our replies on your topics.
We are happy to assist you solve your issue. Thank you.Best regards!
- This reply was modified 9 years ago by Mirela.
-
Thank you Mihaila,
Unfortunately, that does not solve the problem.
I added the code to the custom CSS box but nothing changed. If I resize the window the menu still bleeds into the slider.
Also in your screenshot the time that is supposed to be in the grey beam above the menu is ending up in the menu area.
Thanks for your support,
Gabriel
-
Hello,
Please edit the code above to this:
@media (max-width: 1100px){ nav .menu > li { padding-right: 5px !important; padding-left: 5px !important; } .top_nav .container .row-fluid .span6:nth-child(2) { width: 70%; float: right; } .top_nav .container .row-fluid .span6 { width: 25%; } }
If still no result, please send us your wp credentials in a private reply. We will do it for you.
Best regards!
-
-
Hello,
Sorry for the late reply.
I have added this code into your custom css box:#logo { margin-left: -10px;} /*.top_nav {display: none;}*/
Inside the
@media (max-width: 1100px)
block. What do you mean by “the top beam is turned off too late”? The top navigation bar is supposed to show in iPad dimensions. Do you not want it? if so, then just remove the comment signs (/*code*/) from the second line of code i added this time (.top_nav {display: none;}
).
Let us know.Best regards!
-
Actually I mean the very top beam that has the email, phone number and service times at the top right. The thin gray bar. It should be turned off when the window is sized down.
Thank you
-
Hello,
I think there was a misunderstanding. Do you not want the top navigation bar in responsive? If so, then go to your custom css box, find these lines:
.top_nav .container .row-fluid .span6:nth-child(2) { width: 70%; float: right; } .top_nav .container .row-fluid .span6 { width: 25%; }
Comment them or delete them. Then, find this line:
/*.top_nav {display: none;}*/
Edit it to this:top_nav {display: none;}
Save changes.Best regards!
-
-
You must be logged in to reply to this topic.