Make the header in one line

Question

Hi everybody

How can I make the header In one line in mobile view

Comments

reduce logo size

---

Apply the mayro theme or snowfat theme..

Answer 1

You could override the logo in the stylesheet of your theme (usually qa-styles.css) with a smaller one if the screen width is less than the required width (for SnowFlat that'd be less than 593 px):

@media screen and (max-width: 592px) {
  .qa-logo-link {
    content: url(https://example.org/small_image.png);
  }
}

Of course you'll also have to make sure the image you're referencing exists in that location.

Answer 2

Hello @samer

What's going on with the header is that the logo is too big for small screens so it overflows to the next line, like this:

This answer assumes you are using SnowFlat as the website theme. However, if you're using another theme, you need to find out its stylesheet and modify it instead.

With a text editor, open qa-theme/SnowFlat/qa-styles.css and then scroll down to the bottom of the file; after that, append one of these solutions.

Solution 1: Change image width dynamically. With the help of the CSS property 'width' it is possible to set the logo width relative to the screen with the use of percentages. You need to play a little bit with the values to find a good solution for you:

@media screen and (max-width: 600px) {
  .qa-logo {
    width: 70%;
  }
}

@media screen and (max-width: 420px) {
  .qa-logo {
    width: 60%;
  }
}

@media screen and (max-width: 320px) {
  .qa-logo {
    width: 40%;
  }
}

It will looks like this:

• Pros: It is simple and has broader browser support
• Cons: It still overflows in very small screens and then I'm just kicking the can down the road

Solution 2: Use CSS flexbox layout. Like this:

@media screen and (max-width: 979px) {
  .qam-main-nav-wrapper {
    display:flex;
  }
    
  .qam-main-nav-wrapper .qam-menu-toggle {
    order: 1;
  }
    
  .qam-main-nav-wrapper .qa-logo {
    order: 2;
    width:100%;
  }
    
  .qam-main-nav-wrapper .qam-account-items-wrapper {
    order: 3;
  }

  .qam-main-nav-wrapper::after {
    display: none;
  }
}

Here is how it would look like:

• Pros: It really does the trick
• Cons: It is complex and It is not available on IE < 11, but who is using Internet Explorer these days, anyway?

If you also apply Ansgar Wiechers' idea about a small logo, by adding this code as well, it will looks pretty nice:

@media screen and (max-width: 400px) {
    .qam-main-nav-wrapper .qa-logo img {
        content: url('https://example.org/small_image.png');
    }
}

Have a look:

Warning: These solutions work on a brand-new Question2Answer installation, but other plugins can impinge upon them by making them useless or requiring additional CSS rules; that being said, from that point on you are on your own.

Now, after one of the above solutions is applied, it is time to save the changes made so far. However, Step 3 of the answer provided to this question:

• Where do you increase the comment font size?

describes few considerations to take into account for updating the stylesheet in users' browsers.

---

Tidbits

Modifying files belonging to Queston2Answer is a practice usually known as hardcoding. Wikipedia defines hardcoding in this way:

Hard coding (also hard-coding or hardcoding) is the software development practice of embedding data directly into the source code of a program or other executable object, as opposed to obtaining the data from external sources or generating it at runtime.

The disadvantage is that changes made this way will be lost after Question2Answer is updated. This practice is considered as hardcoding because there are better ways to accomplish this change:

• Via a Question2Answer plugin
• Via 'Custom HTML at top of every page' option under 'Admin' > 'Layout' page

With the advantage of preserving changes even after Question2Answer updates.

If it is such a bad practice, why do you post an answer using it?

• It is the quickest and easiest way to make modifications to Question2Answer websites
• It also requires low technical skills to perform this changes
• It is the easiest way to explain it

At the end of the day, the spirit of this answer is to be useful for the greatest amount of readers, regardless of their technical background; once they understand how to perform this change, they can also level it up with the best practices.

---

I hope my two cents are helpful to you. If you have any question about this subject, please leave a comment below or update your question with more details.

Take care, bye!