-
Posts
-
Hey Guys,
as I thought, my customer wants some modification to the main layer of the avia navigation. You may take a look at http://www.pcamobile.de/startseite/. You’ll notive the white right aligned area within the header… yeah, the menu should go there. *yikes*
I’ve figured out everything so far (reverse css engineering, doh), but there are a few difficulties.
1. The header size is set via jQuery (avia.js > avia_header_size) depending on the scroll event.
2. Repositioning with top:xx won’t do it…
Wait, I think I got an idea… if I would change the height of the top css too… gonna try it now…
Yep, works. Sometimes you have to start a thread to get the idea… lol… I’ll post this anyways.
So if someone likes to modify the avia menu position, you should add this css:
/* Main Navigation Mods */
.main_menu {height:25px; top:92px; right:-30px;}
.main_menu ul li a {height: auto !important; line-height: 20px !important;}
.main_menu ul:first-child > li > a {padding:0 7px; font-size:11px;}
#header .avia_mega_div {margin: -1px 0 0 0; padding: 1px 0 0;}
If you like the dynamic height of the header, you’ll have to mess with the avia.js located in js/ folder. I reposition the whole menu using a distance from top on .main_menu wrapper. So you have to add this to the function avia_header_size(). I’ve added top_height = $(‘.main_menu’).height() to get the current height of the header, set a static value topH for both full and half size. Then simply add it to the css class: $(‘.main_menu’).css({top: topH + ‘px’});
Don’t get it? Nevermind… it looks crappy anyways… :-/
- The topic ‘Avia Menu – Repositioning’ is closed to new replies.