Hi Eri

To reduce the height of your menu bar try adding the following to the Custom CSS field of your templates parameters...

#hornav > ul > li > a {

    padding-bottom: 10px;

    padding-top: 10px;

}

#hornav .menu li [class^="fa-"]:before, #hornav .menu li [class*=" fa-"]:before {

    top: 12px;

}

For the logo area you can also add the following (edit to taste)..

#container_header, .header_bar {

    height: 100px;

}

Note you will also have to edit the stop position of your menu on scroll by editing the following in your templates scripts.php...

jQuery("#container_hornav").sticky({ topSpacing: 122 });

Sorry to say I do not understand your last query?

Ciarán

Dear Ciarán,

I added the following to the Custom CSS of one of my templates:

#container_header, .header_bar {
height: 80px;
}

#hornav > ul > li > a {
padding-bottom: 8px;
padding-top: 8px;
}
#hornav .menu li [class^="fa-"]:before, #hornav .menu li [class*=" fa-"]:before {
top: 10px;
}

jQuery("#container_hornav".sticky({ topSpacing: 122});

BUT something is wrong when I scroll down the page (http://www.megarevma.gr/new/index.php?option=com_content&;view=article&id=39&Itemid=104). When I change the jQuery topSpacing nothing happens..

ALSO the position of the text in the logo area needs to be adjusted also? How can I do this?

Could you please advise?

Thank you in advance,

Eri

Hi Eri

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán

Hello

I have corrected your scripts.php. Your top menu should be now sticking in the correct position.

To edit the position of your logo add the following to the Custom CSS field of your templates parameters...

#logo {

    top: -22px;

}

Ciarán

Thank you Ciarán! It works fine now!

...And something else I noticed.

The second level menu, now that we reduced the menu height, seems to be a little lower than its parent, that means it leaves a small space between the two. How can I make the small space disappear?

Thanks again!

Try also adding the following..

#hornav li:hover > ul,

#hornav li ul li:hover > ul {

    top: 40px;

}

Ciarán

Hi Ciarán,

I also think I have to adjust the height of the third level menu also..
Can you please tell me how to do this?

Thank you in advance.

Best regards,

Eri

Hi Eri

Try also adding the following to your Custom CSS field...

#hornav li ul li:hover > ul {

    top: 0px;

}

Ciarán