Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Weird Header when window is small

headermenu
    • 9 years, 8 months ago Rednown
      Participant

      Expired

      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

    • 9 years, 8 months ago HannahTK
      Participant

      Expired

      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!

    • 9 years, 8 months ago Rednown
      Participant

      Expired

      Thank you Hannah!

      I hope it also works out for your page.

    • 9 years, 8 months ago Mirela
      Participant

      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;
      }
      }

      Result.


      @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, 8 months ago by Mirela.
    • 9 years, 8 months ago Rednown
      Participant

      Expired

      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

    • 9 years, 8 months ago Mirela
      Participant

      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!

    • 9 years, 8 months ago Rednown
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 8 months ago Mirela
      Participant

      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!

    • 9 years, 7 months ago Rednown
      Participant

      Expired

      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

    • 9 years, 7 months ago Mirela
      Participant

      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!

    • 9 years, 7 months ago Rednown
      Participant

      Expired

      Thank you! That solved the problem.

Viewing 10 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password