That looks like you’re using the Bootstrap3 theme, right? I think you’ll want to look at the documentation for the navbar component in Bootstrap3:
So the <header> element is the navbar component:
And how you order these is up to you. The way that Bootstrap works is that you define the components using re-usable classes. So that kind of means modifying the template file.
If I were in your position, I might seek to move the #navigationUser alongside .nav-menu. But beware that you may end up with too much content in the navbar to fit on a screen before the collapsed nav kicks in.
Thanks for the reply @NateWr! Would you happen to know any great examples of OJS3 sites where they keep the nav header html intact and just modify the CSS? I would prefer not to modify the template if I don’t have to.
The way that Bootstrap3 works is that layout components are defined using common components in the HTML. So it’s going to be pretty hard to do a CSS-only child theme of Bootstrap if you want to modify the layout in any way.
You might have more luck child theming the default theme, which is more open to context-specific, CSS-only changes.
I’m not aware of any OJS 3 implementations that have singificantly modifed the header yet, but you might find some in the Showcases forum.