[Resolved] Search Icon should be to the left of menu icon

[Christoph]

By default, it seem, the search icon is positioned to the right of the menu icon in mobile view. How can I make sure that the menu icon is always on the right? In fact, I think that should be the default, as it is common practice.

[Tom]

Hi there,

Are you using the mobile header?

[Christoph]

Yes, I guess that’s what it’s called.

[Tom]

Good point.

Can you try this?:

.mobile-header-navigation .mobile-bar-items, 
.mobile-header-navigation .menu-toggle {
    float: none !important;
    display: inline-block;
}

.mobile-header-navigation {
    text-align: right;
}

[Christoph]

I tried it but it doesn’t change the appearance at all.

[Leo]

Hmm the code worked for me. Any chance you can link us to your site?

https://s10.postimg.org/xamh9d2t5/2017-06-27_0811.png

[Christoph]

I have sticky menu enabled. Did you try under those conditions?

Otherwise I can create a login for you.

[Leo]

Yup sticky enabled: http://www.screencast.com/t/2r8Sc9Xu

You can send it through Account Issues if you prefer: https://generatepress.com/contact/

Just mention the topic.

[Tom]

I’m not seeing this CSS added anywhere: https://generatepress.com/forums/topic/search-icon-should-be-to-the-left-of-menu-icon/#post-339792

How did you add it? Did you clear your caching plugin after?

[Christoph]

I removed it again because it didn’t work. Now I added it back and cleared the cache. (But still not working.)

BTW: I was assuming that I do not need to clear the cache in order to see changes in the preview. Isn’t that so?

[Tom]

Still not seeing it as being added.

Maybe try disabling any caching/autoptimize plugins for now just to test.

Caching is fun like that, it needs to be rebuilt after every single change.

[Christoph]

I don’t understand why you don’t see it because it’s there:

And I don’t understand why you wanted a login if you’re not using it.

I turned autoptimize off now but I still don’t understand why that would make a difference because all other changes show up immediately in the preview when I change the custom CSS, so why wounldn’t this?

[Leo]

If you don’t see it in the preview it could be that there is an syntax error in the previous CSS which stops this from executing.

Can you run it through this site and make sure there are no errors?
https://jigsaw.w3.org/css-validator/#validate_by_input

[Tom]

Ah yea, that looks like the issue.

[Christoph]

Yes and no. Yes, there was a curly bracket too many, but no, this did not solve the issue.

[Author]

Posts