Update navigation on new sitebuilder homepage

[MirandaEcho]

1. REMOVE the sticky nav
2. update the navigation below the logo

Staging site was refreshed this morning from live, including the new homepage.

[MirandaEcho]

I want 20-30 minutes of looking into this, and then please report back.

[joshdarby]

@benlk Have you started on this?

[benlk]

I haven't.

There's some past discussion of this at https://innorg.slack.com/archives/GH0FMCCUR/p1580488316001500

[benlk]

Present homepage top looks like this (when the sticky nav isn't displaying):

Site options are:

/* <![CDATA[ */
var Largo = {
    "is_home":"1",
    "is_single":"1",
    "sticky_nav_options": {
        "sticky_nav_display":true,
        "main_nav_hide_article":true,
        "nav_overflow_label":"MORE"
    }
};
/* ]]> */

There appears to be no custom CSS beyond what the theme provides, either in the Theme Editor or the CSS Customizer. This site does not use Largo's LESS Customizer.

Relevant styles:

umbrella-voiceofoc/wp-content/themes/voiceofoc/less/style.less

Lines 61 to 67 in b90f7fa

	#site-header {
	position: relative;
	text-align: center;
	.header_img {
	max-height: 150px;
	}
	}

There's some other styles for the sticky nav, which aren't relevant to the main nav.

SiteOrigin PageBuilder doesn't have its own menu function. It does provide a way to insert WordPress' menu widget, which doesn't work in this position:

[benlk]

Questions:

1. do we want to disable the sticky nav outright, including on mobile? If so, that's custom, because Largo does keep it around for mobile
2. do we want to port Voice of OC's custom header to hardcoded code? The alternative is to create a specific post which will be used to pagebuild the header — and that doesn't solve the "how do we make the nav real" question.
   • do we want to conduct additional research into whether we can build the main menu in the site builder, or do we want to plow forward with a usual custom header?
   • if porting, what becomes hardcoded and what becomes an editable widget? Things to consider are the left/right ad things, the donation link and the subscribe-today link.

[benlk]

Very small customization: ~2h

• remove any hope of drop-downs in the custom pagebuilder: free
• convert top-level "menu" items in the pagebuilder template to links to their respective categories: 30m
• empty the Main Nav partial, so that it's always blank, and check to make sure there are no JS errors from Largo's nav js as a result of the removal: 1h

Full custom: 8-10h

• (separate from the custom header) Disabling the sticky nav completely: copying code from CIJN, might take 1-2h
• Porting the header to custom header, with assumptions below:
  • 1 custom widget area for the two ad widgets, using the display:flex and order method that Josh used in another project recently to reorder their display from logo, widget, widget to widget, logo, widget: 2h
  • Custom styling for the main and secondary menus: 2h
  • 1 custom widget area for donate and subscribe buttons, with same ordering: 2h
  • Donate/subscribe images for those items, two options:
    • images with a little bit of custom styling in a text widget for alignment to take them from image-over-text to image-beside-text on mobile: 2h
    • show/hide widgets based on screen size using Largo's widget controls: 1h, but harder for client to maintain because the UI wouldn't be explicit about the order the widgets appear in

[benlk]

Update: With the "Enhanced Text" widget in the Sidebuilder template area used to output the header, and the following "Content:" in the widget, the the markup` for the main nav is output.

<?php
    get_template_part( 'partials/nav', 'main' );
?>

However, there are some CSS conflicts that prevent the menus working.

.widget li {
    overflow: hidden;
    margin-bottom: 1em;
}

needs to be overridden for the .widget #main-nav li case in order for the dropdowns to display upon hover.

If we expand the Enhanced Text Widget to also include the secondary nav partial:

<?php
    get_template_part( 'partials/nav', 'main' );
    get_template_part( 'partials/nav', 'secondary' );
?>

---

• CSS to fix the menus: 30m
• CSS to change the appearance of Trending: 30m
• Customize header.php to remove main/secondary nav partials, to prevent duplicate elements on page: 30m
• Unexpected obstacles: 1-2h

[benlk]

Compare the above screenshots, specifically the colors of the navs, to the following screenshot of the master or staging branch: (they look the same)

Note the different background colors for the main nav container color, and for the menu items in that nav.

The background color and font color both come from /wp-content/themes/voiceofoc/css/style.min.css?ver=5.3.2, which is to say: these colors come from the compiled Voice of OC CSS, which was in theory compiled from the LESS files.

[benlk]

This color change does not come from #31

[benlk]

The color change comes from edits made on prod to the minified CSS file, which will require reverse-engineering in order to capture.

To make future reverse-engineering simpler, let's eliminate the minified file from Grunt builds.

[benlk]

• keep centered nav
• remove header search from main-nav partial so that the search can be added directly as a Site Origin widget