ne-blackgreen

Unexpected Navigation Bar Layout - ne-blackgreen

Unexpected Navigation Bar Layout

by wfarrell » Tue Jun 27, 2017 1:54 pm

We have a production site (PROD), and a test site (TEST), both using phpBB 3.2.0 and with ne-blackgreen 3.0 installed from the phpBB styles database.

When I use ne-blackgreen on the TEST site everything looks like I expect, but when I use it on PROD the header and navigation bar end up laid out differently.

Screen shot on TEST: https://1drv.ms/i/s!AvgPdPZisZN3hEeeVeEqKyXtJpKn
Screen shot on PROD: https://1drv.ms/i/s!AvgPdPZisZN3hEZgeea7miX4yHJv

The configuration difference between the two sites that causes the layout difference is in the site name. The TEST site's name is shorter (DP TEST SITE) than PROD's name (DISTRIBUTED PROOFREADERS).

On PROD, I understand why that ends up putting the site name on two lines and why the site description (Activity Hub, Wiki, Blog) slides to the left under the logo, and I have figured out a fix for that.

I am struggling, though, to figure out why the site name seems to affect the layout of the navigation bar. Note that on TEST the navigation bar contains one line of text/links with

Code: Select all

 Quick links  FAQ  Code of Conduct  Privacy Policy ACP MCP    Notifications  Private messages  <avatar> wfarrell
where the Code of Conduct and Privacy Policy are added by a local phpBB extension.

On PROD, with the same ne-blackgreen code installed and the same extension installed, the navigation bar has two lines, with

Code: Select all

Quick links  Private messages  <avatar> wfarrell
on the right and

Code: Select all

Notifications
below the other text. The Code of Conduct and Privacy Policy links are within the Quick Links.

I know that in all the styles we have installed, if I make the window narrow enough, eventually the added information (Code of Conduct, Privacy Policy) ends up within the Quick Links. That is OK, and it also happens on TEST.

But why do they move into the Quick Links on PROD regardless of window width, and especially with a window the same width as on TEST, where they end up displayed directly on the navigation bar?

I do not understand why the layout difference in the header due to the longer site name is affecting the layout within the navigation bar.

Any ideas?

(Note: If you need to see it, I can provide the PROD and TEST site URLs, but you would have to register an account with each site in order to see ne-blackgreen, as that is not our default style for guests. I can provide instructions for registering if needed; you cannot register through phpBB itself.)
--
Walt
wfarrell
Registered User
Posts: 27
Joined: Sat Jun 25, 2016 12:23 pm
Contact:

Re: Unexpected Navigation Bar Layout

by nachtelb » Tue Jun 27, 2017 2:04 pm

Its all about the longer sitename. It pushes things the wrong way.

Option 1: Decrease the width of your logo image.
Option 2: Reduce the text-length of your sitename.
Option 3: Reduce the text-size of your sitename.
common.css. - line 19 - .h1 - go from 2.5em to 1.5em and play with it
Option 4: Enlarge the height of your headerbar
common.css - line 190 - .headerbar - height: 100px to 140px and play with it

I will go in details if you need more information than this, after you have choosen.
nachtelb
Registered User
Posts: 156
Joined: Sun Feb 19, 2006 2:00 pm
Location: Germany
Name: Bernhard
Contact:

Re: Unexpected Navigation Bar Layout

by wfarrell » Tue Jun 27, 2017 3:11 pm

Thanks, nachtelb. I will play with those and see what looks best to me. I would prefer not to do #1, and #2 is not possible, so it will be one of #3 or #4.

I am curious, if you can explain it, why the layout of the header area (with that longer name) has the effect that it does on the navigation bar layout. I haven't found anything to explain that, yet. But that's more for my education than anything else :)
--
Walt
wfarrell
Registered User
Posts: 27
Joined: Sat Jun 25, 2016 12:23 pm
Contact:

Re: Unexpected Navigation Bar Layout

by nachtelb » Tue Jun 27, 2017 3:16 pm

The right space is "search-bar-box". Your sitename goes into a second line and pushes down the activity-hub, wiki and blog-links. The bigger invisible box goes around them. The Quicklinks now starts under the "search-bar-box" in the right of the bigger box.
This is my theory, i have not controlled it in detail.
nachtelb
Registered User
Posts: 156
Joined: Sun Feb 19, 2006 2:00 pm
Location: Germany
Name: Bernhard
Contact:

Re: Unexpected Navigation Bar Layout

by nachtelb » Tue Jun 27, 2017 4:13 pm

I found Option 5 for you:

change common.css, line 179

Code: Select all

.site-description {
    float: left;
    width: 650px;
}
With this method the space for the sitename is bigger.
nachtelb
Registered User
Posts: 156
Joined: Sun Feb 19, 2006 2:00 pm
Location: Germany
Name: Bernhard
Contact:

Re: Unexpected Navigation Bar Layout

by wfarrell » Tue Jun 27, 2017 6:48 pm

Thanks.
--
Walt
wfarrell
Registered User
Posts: 27
Joined: Sat Jun 25, 2016 12:23 pm
Contact:

Re: Unexpected Navigation Bar Layout

by wfarrell » Tue Jun 27, 2017 7:18 pm

By the way, the fix I think I will go with is to common.css line 23, where I will reduce the margin-top for h1 from 35px to 10px.

I still do not fully understand the interactions between everything, but your thoughts have helped me understand it better, and to recognize the "box" that is forcing the nav-bar contents to the right. Thanks!
--
Walt
wfarrell
Registered User
Posts: 27
Joined: Sat Jun 25, 2016 12:23 pm
Contact:

Re: Unexpected Navigation Bar Layout

by nachtelb » Tue Jun 27, 2017 7:19 pm

You are welcome :)
nachtelb
Registered User
Posts: 156
Joined: Sun Feb 19, 2006 2:00 pm
Location: Germany
Name: Bernhard
Contact:

Re: Unexpected Navigation Bar Layout

by AmberSky » Wed Aug 23, 2017 6:06 pm

Not really a fix to the issue... but there's an ext by Hifikabin to move the search bar to the navbar. https://www.phpbb.com/customise/db/exte ... ar_search/

I use it personally, then just use an image for the site logo. Then center my image. Wish I knew how to do it without an extension... Looks better down them imo.
User avatar
AmberSky
Registered User
Posts: 19
Joined: Thu Mar 12, 2015 12:58 am
Contact:

Re: Unexpected Navigation Bar Layout

by nachtelb » Wed Aug 23, 2017 6:15 pm

You are free to go to full width or change it from 900 px up to 1100 px like prosilver if you need more space. I chose 900 px width because of the fact, that text-length should not be too long in width to be better readable.

full-width-FAQ: https://www.phpbb.com/customise/db/styl ... n/faq/2251
nachtelb
Registered User
Posts: 156
Joined: Sun Feb 19, 2006 2:00 pm
Location: Germany
Name: Bernhard
Contact:

Re: Unexpected Navigation Bar Layout

by AmberSky » Wed Aug 23, 2017 6:22 pm

I agree. Not all screens show the same width. ;) I just happen to have other things in my header area. The search bar is just in the way for me. Was just showing how I got around it. :D
User avatar
AmberSky
Registered User
Posts: 19
Joined: Thu Mar 12, 2015 12:58 am
Contact: