Added the site map back to the bottom of the mobile page design, since I can't reliably use a fixed header. Can't decide yet whether to remove the 'Contact' nav menu option, since the social media links include an email icon. I've also restructured the list options in '_lists.sass' to allow for different list styles in the nav menu and the site map (one link per line vs. multiple links per line). This still has not solved the problem of my dividing line not showing up next to links in my site map, even though I have moved the relevant CSS to '_footer.sass'.
Found a toggle menu example at Shay Howe's site (learn.shayhowe.com). Trying to incorporate into my mobile design, but so far I've had to move my nav box out of the header, which will cause design problems when I want my menu to be within the header on larger screens. I'll also look for other versions of toggle menus, since I heard that you can use JS or jQuery rather than CSS to make them work. That would hopefully allow me to put my nav div box back inside the header where I want it.
Created navicon for main menu's dropdown in mobile design. Tried adding some copied javascript to hide or show those menu items depending on screen size, but the script still needs work. Created new media query to hide the navicon at screen widths above 800px, when regular menu will be visible again. Fiddled with the CSS terminology for background colors and images of the footer's social media background until I got the mix-width/max-width mix-up straightened out. But still cannot display desired background image at screen widths above 400px. Reorganized CSS pertaining to link display, but still can't display dividing lines in sitemap links, and can't make the navicon link change color in hover/active/focus states.
Merge branch 'testing'