I’m new to this, but trying to understand the platform to design a journal site for my company. This is partly an aesthetics question and partly HTML/CSS question.
By default, the nav header seems to be structured as 2 rows. Here’s the relevant html code
Personally, this doesn’t look right to me. Is there an example of an OJS3 site where this looks good?
If I were to change this into one line, would you recommend I change the underlying HTML template? (I am under the impression this is frowned upon because it might break future template upgrades.)
Or should I change the CSS?
I used {position:absolute} to move the first .content-fluid inline with the 2nd, but this seems brittle and breaks responsiveness.
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.