Custom CSS Menu - NOT with "custom menus" module

Hi,

Sorry if this is in the wrong topic. I'm hoping I can get some help on this as I've struggled with it on my own and just can't seem to crack it. I'm new to Gallery3. Have run multiple Gallery2 sites for years.... so this version presented something of a learning twist for me. Previously, I would build custom CSS menus utilizing graphics and hover properties to get a dynamic, image based menu for customer site installations, that would easily integrate Gallery with the rest of the website theme. I would then insert the code for this into the index.php and my custom theme css file. That just doesn't seem to be working for me this time.

I'm running:

Gallery 3.0.9 Chartres
Greydragon theme with custom.css and custom modified colorpack
Apache version 2.2.24
PHP version 5.4.16
MySQL version 5.5.32-cll
Linux OS

I'm currently developing the gallery for my customer on a test site here: http://testlab.aurielrene.com/gallery.

For an example of the menu I want to insert in the header, see here http://testlab.aurielrene.com/gallery/themes/greydragon/css/nav.html.

I develop it all in one file because that's easier for me, and then split it into external css and html. I tried doing that and using a php include to call to it in the index file, but I don't know enough about PHP to do that properly. I modified the references to my files properly, because everything showed up, but because of the terminating tags in my code, none of the actual gallery code and styling got spat out (all the test pictures were there though.)

I checked out the custom menus module, and it only adds items to the existing menu... which is not what I want (unless there's a way to make it look the way I want it). I want an easy way to do this because it's my go-to for multiple sites. Absolutely loved Gallery2.... Gallery3 is still growing on me. Started using Gallery2... oh man, at least 8 or 9 years ago. So learning new tricks for the new version is tripping me up a bit.

So, sorry... I don't think this needs a custom module, I just need help because it's totally frustrating me, and I've delayed my customer due to this issue. Thanks in advance for any help!

P.S. floridadave so kindly suggested this solution to me:
add:
<?php include 'http://testlab.aurielrene.com/gallery/themes/greydragon/css/nav.html'; ?>
to /gallery/themes/greydragon/views/page.html.php just below the <?= $theme->page_top() ?>
you might have to play around with a bit of positioning as I don't deal with the Grey Dragon theme that much.
In http://testlab.aurielrene.com/gallery/themes/greydragon/css/nav.html you might have to put full urls as well.

So, I've tried all this out... and it doesn't seem to be including the file? I also modified nav.html to have full urls.

Any help is very appreciated, thanks! ---Auriel

Well I've poked around with this a bit this evening. The above mentioned things to try did not work, although I started getting somewhere with putting my menu file in the root gallery directory. Except, I was back to my original problem of it overriding all of the other styling for the gallery...

So I decided to try to be a little more thorough with the include, and I've gotten it almost completely settled. Here's what's done:

I split nav.html into nav.css and navi.html during previous testing.
I referenced the nav.css in the screens.css file that combines all of the css files for the Grey Dragon theme.
I went back to page.html.php and dropped the body contents of navi.html underneath
<?= $theme->page_top() ?>

Now, it's working - almost. All the styling is there for the gallery. I'm not spitting any erroneous code onto the page. My cursor turns into the finger-pointer to let me know that I have links where my menu code says I should. But, the images called out in nav.css are not showing up. Interestingly, the images used in the hrefs dropped into page.html.php are there (it's a spaceholder block display transparent .png). I can see all the appropriate code when I inspect the element in chrome. In nav.css, I have tried referencing the images with full http:// urls, starting with /gallery, and directing from the location of nav.css (i.e. colorpacks/thirteen/etc). I gave all the nav.css divs a z-index of 9999 to hopefully override any other z-index positioning... but still no pictures. Not sure what to try next??

Through some further poking in chrome's inspect element, this shows up inside one of the nav.css divs:

background: url('http://testlab.aurielrene.com/gallery/themes/greydragon/css/http://testlab…lery/themes/greydragon/css/colorpacks/thirteen/images/menu_biography1.png') no-repeat;
background-image: url(http://testlab.aurielrene.com/gallery/themes/greydragon/css/http://testlab.…llery/themes/greydragon/css/colorpacks/thirteen/images/menu_biography1.png);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
}

So that's not intentional.... what would be causing that and how do I counteract it? My original code is this:

background: url("colorpacks/thirteen/images/menu_biography1.png") no-repeat;

Thanks in advance for continued advice...