Problem with site Header

  • Muhammad Junaid

    (@mj00712)


    1 year, 4 months ago

    Hi, I hope you’re doing well. I have two issues with the site header on the theme.

    1. How can I align the search and menu icons exactly to the right corner on mobile?
    2. Is there a way to place the search icon before the menu icon? Alternatively, is there an option to center the logo, with the search and menu icons on either side?

    For the center alignment, I only need this for mobile, as on desktop, I want the logo on the left, followed by the menu, and the search icon on the right.

    Additionally, I’ve attached the PageSpeed results. As you can see, the header breaks on both mobile and desktop. Could you please advise on how to fix these issues?

    Thank you!

    Mobile Menu: Image 1

    Desktop Menu: Image 2

    Mobile Speed Test: Image 3

    Desktop Speed Test: Image 4

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Carolina Nymark

    (@poena)

    1 year, 4 months ago

    Hi @mj00712

    1. The default header in the theme places the menu inside a row that justifies the content the right.
      If you need to reduce the padding or the size of the button in the search block, you would need to add your own custom CSS, there is no option for it in the interface.
    2. You can move the search block and the other blocks you mentioned to any position inside the row, but the blocks will be in the same position on all screen sizes.

      If you go to the pattern directory you can find more pre-made headers to try.
      https://ww.wp.xz.cn/patterns/categories/header/
    Carolina Nymark

    (@poena)

    1 year, 4 months ago

    The page speed test is probably failing to wait for the JavaScript to load before taking the screenshot, I wouldn’t rely on it. I recommend testing on a real mobile.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Problem with site Header’ is closed to new replies.