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

Header responsive problem

header
    • 7 years ago faganmehdi
      Participant

      Expired

      Hi,

      At header I want menu line and text start from same place. I give margin to 5 MARCH….. text. But when I change browser or window size text move.

      Please help me

       

      https://purelivingfair.com/

    • 7 years ago Mirela
      Participant

      Hello,

      What header style have you selected? Can you please send us some valid wp credentials?
      So we can give it a closer look.

      Best regards!

    • 7 years ago faganmehdi
      Participant

      Expired

      Hello,

      How I will send to you wp credentials?

      Best Regards.

    • 7 years ago Medrit
      Participant

      Hello,

      To add some valid WP credentials in your profile data extra fields please read this article.

      Let us know.
      Best regards!

    • 7 years ago faganmehdi
      Participant

      Expired

      Hello I have just add wp credentials

    • 7 years ago Mirela
      Participant

      Hello,

      Well, the header will change when you change the screen width because theme is responsive and it will adapt to the new screen size. Try adding this code into your Custom Css menu in Customize > General > Custom Codes > Custom Css:

      @media (max-width: 991px){
      .header_container.cl-header-topnav-mobile .top_nav.header-row .header-col {
          width: auto !important;
          top: 68px;
      }
      }

      Result screenshot: https://postimg.cc/image/akm1tbxyv/
      Let us know.

      Best regards!

    • 7 years ago faganmehdi
      Participant

      Expired

      Hello,

      I add this code. At mobile screen everything is good. But when change desktop browser size, menu section and text are moving.

      Also Header cover the home page content at mobile

      Please help me.

      Best Regards,

      • This reply was modified 7 years ago by faganmehdi.
    • 7 years ago Medrit
      Participant

      Hello,

      The header is adjusted when the width is changed, so it can’t be exactly the same in desktop and mobile.

      Please add the css code below so the header doesn’t cover the home page content at mobile:

      @media (max-width: 992px){
      .cl_media.position_stretch .inner {
          top: 100px;
      }
      }

      Let us know.
      Best regards!

    • 7 years ago faganmehdi
      Participant

      Expired

      Hello,

      Thank you. But when change browser or browser size menu line and text move.

      Screenshot of the screen: https://postimg.cc/image/nyqv0p0mf/

      Please help me.

      Best regards

      • This reply was modified 7 years ago by faganmehdi.
    • 7 years ago Mirela
      Participant

      Hello,

      In what screen width did you take the screenshot? As previously mentioned, the header and every element in the site will flow and reposition in according to the screen width. That makes a site responsive. The devices used today have a pre-defined screenwidth and these are the dimensions used from developers when customizing the responsive view of the theme.
      The basic pre-defined screen widths are 480px / 767px (mobile profile and landscape) & 979px / 1024px (ipad profile and landscape)
      You can see more here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

      Every css is wrapped inside a@media rule to target only the specified screen width. What screen width/ device is the screenshot taken?

      Let us know.

      Best regards!

    • 7 years ago faganmehdi
      Participant

      Expired

      How I completely change header section. I want to change throw header builder plugin. But I can not add any code in header.php file. Please help me.

    • 7 years ago Mirela
      Participant

      Hello,

      Can you please be more specific? You can change the header style, by easily importing another of the available headers, using the Setup wizard. There is no need to add any code to header.php file directly.

      Or did you change this file already and therefore can not import another header demo?

      Let us know.

      Best regards!

Viewing 11 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