Customizing The Main Menu

hi.

thanks so much for all your help so far. i finally have a grasp on the enfold structure and hierarchies but i’m now starting to customize my main menu and i’m running into some issues.

you can find the page i’m editing here:
cindyworkman.com

1. i’d like to have a full screen main menu but all the various css code snippets i’ve found on the forum posts don’t work. i’d like it to look like this – where the height of the menu remains static no matter what size the window is resized to but the L/R padding of each section (do you call this a button?) would increase or decrease depending on the browser window size. Text remains centered in each button and retains it’s size of 12px:

cindyworkman.com/cw_images/fullscreen_menu_example.jpg

NOTE: this image is from a photoshop comp so it looks like i might be asking for some white space on either side but i don’t want any white space. imagine the single pixel black lines on the left/right side are the boundaries of the browser chrome.

2. I’ve used some custom css (see below) to adjust the header and the height of the menu (and perhaps what i used is wrong – it’s noted below) but i can’t seem to get rid of the 2 horizontal lines above and below the menu. i’m not even sure these lines are part of the menu – they may be part of another element (logo, logo box) that i previously hid. and as i can’t see under the hood to see what i’m targeting (like with html) it’s been hit or miss as to what element to address in my custom css.

can you please tell me how to get rid of these? thanks.

/*Make the logo disappear*/
.logo { display: none !important; }

/*Make the logo placeholder box disappear*/
div#header_main > .container {
display: none !important;
}
.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
padding-top: 37px !important;
}

/*main menu height*/
.av-main-nav > li, .av-main-nav > li > a {
height: 41px !important;
line-height: 41px !important;
}

3. I’d like my menu be sticky BUT appear after the 1st color section and above the 2nd color section. I’ve uploaded a jpeg so you can see what i have in mind:

cindyworkman.com/cw_images/nav_color_section2.jpg

and yes, my intention is to have only an image with hotspots for the first color section on the page – which would go right up to the top edge of the browser chrome.

can you please tell me how i can accomplish this?

4. When I resize my browser window to be smaller – the menu is completely disappearing? i assume it’s going into hibernation as the browser window hits a targeted size (phone or tablet) as i have the option checked to use the mobile menu. but is there a way to see the menu ‘tablet icon’ while i’m building my page?

thanks in advance for al your help.

cheers-

cindy