Site name and search, menu icons inverted in larger screens

  • Hello and congrats on your new theme. Beautiful and elegant!

    I’m adjusting it to my website and noticed that the header bar, where site name & description, plus the search icon and the menu icon are placed, shows some elements with an inverted position on larger screens.

    On mobile, tablet and even desktop up to a point, I see the search icon to the left, name & description in the middle, and menu icon to the right. (I’ve disabled the horizontal menu.)

    But after 1000px width, the site name & description moves to the left, and both the menu and search go to the right, the search replacing the menu as the top-right element. This cannot be seen in the customizer (at least in my 1440 display), as the desktop view is still shorter than 1000px.

    I’d appreciate if someone pointed me to the right way, preferably in the child theme files, to fix this.

    Thanks,
    CB

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

  • Hi, what order do you expect the elements to be in on larger screens above 1000px wide?

    Thread Starter CB

    (@cbrandt)

    I want the elements to be in the same order in which they appear in smaller screens.

    I have now:

    Mobile: https://snipboard.io/wezBGy.jpg

    Below 1000px: https://snipboard.io/T0m1Jt.jpg

    1000px and up: https://snipboard.io/b2iuHN.jpg

    (For all sizes, I have removed the labels for search and menu)

    • This reply was modified 4 years, 11 months ago by CB.
    Moderator James Huff

    (@macmanx)

    Just to be clear, nothing is broken here, this was an intentional design choice. ??

    The general viewing pattern on desktop computers is top-left to bottom-right, and on portable devices the viewing pattern is more centered due to screen size.

    For example, on a desktop computer, you’d probably rather have folks see your site’s name before a search icon. ??

    Because of this, the theme was designed to put the site’s name or logo (uploading a logo replaces the name) in the first-viewed spot for any screen size.

    As mentioned by James, this is how the theme was designed to display that content on different devices. I’m not sure how much CSS it would take to force the elements to display in a different order while ensuring that it adjusts correctly to different screen sizes.

    Your best bet would be to create a child theme (https://developer.www.ads-software.com/themes/advanced-topics/child-themes/) and adjust the theme code from there while adding in the appropriate CSS.

    Thread Starter CB

    (@cbrandt)

    Hi James,

    Just to be clear, nothing is broken here

    I’m sorry, I didn’t mean to say there’s something broken with the theme, although my saying that I needed help to “fix it” may have caused that impression. I’m just trying to adjust the theme to my taste, that’s all.

    I appreciate you laying out the reasons why the elements are positioned the way they are, thanks for the explanation. But I do value consistency, and I’m specially bothered to see the elements change place while I move my tablet from vertical to horizontal position.

    Hello Jarret,

    Your best bet would be to create a child theme

    I have a child theme. That’s what I asked in my initial post, because I could not find the place where I could perform this change in the child theme. The theme’s header.php file seems to lay the items as they appear on smaller screens. So something must be inverting the elements, and couldn’t find anything in the @media section for min-width of 1000px of the style.css that would cause that inversion. Of course I can be wrong about either or both of these ?? I’m not a developer.

    Perhaps the inversion is done by some JavaScript trick?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Site name and search, menu icons inverted in larger screens’ is closed to new replies.