Hi Yigit, thanks, the menu also looks funny at these widths (see images).

http://plpl3750.staging-cloud.netregistry.net/wp-login/wp-content/uploads/2013/11/Screen-Shot-2013-11-19-at-3.42.29-pm1.png

http://plpl3750.staging-cloud.netregistry.net/wp-login/wp-content/uploads/2013/11/Screen-Shot-2013-11-19-at-3.42.14-pm.png

Hi Yigit- sorry this didn’t work

Hi Ismael,

I have added a lot of custom CSS from Yigit. I will add it all below as I am unsure which bits you need.

.sub_menu { top: 390%; }
.header-scrolled .sub_menu { top: 270%; }
.page-id-2528 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2736 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2609 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2605 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2625 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2621 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-734 .sub_menu li { display: none; }
.page-id-1277 .sub_menu li { display: none; }
.page-id-1122 .sub_menu li { display: none; }
.page-id-1224 .sub_menu li { display: none; }
.page-id-1167 .sub_menu li { display: none; }
#top div .enfold-gallery img {
padding: 0;
border: none;
}
.responsive #header .sub_menu { position: absolute; }

.page-id-2528 .sub_menu li { padding: 0 44px; }
.page-id-2736 .sub_menu li { padding: 0 44px; }
.page-id-2609 .sub_menu li { padding: 0 44px; }
.page-id-2605 .sub_menu li { padding: 0 44px; }
.page-id-2625 .sub_menu li { padding: 0 44px; }
.page-id-2621 .sub_menu li { padding: 0 44px; }

@media only screen and (max-width: 480px) {
.page-id-2528 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2736 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2609 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2605 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2625 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2621 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2528 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2736 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2621 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2736 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2625 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2609 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2605 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

Perfect this is done now. Thank you.

On my mini ipad and the sub-menu looks messy as it goes onto two lines and is left aligned. Is it possible to centre the sub-menu rather than have it left aligned?

Also, on mobile, the sub menu appears on all pages. How do I get it to only appear on certain pages like on the desktop version?

Hi Yigit,

1. In this image https://www.dropbox.com/s/bck633ztk84hd6d/Screen%20Shot%202013-11-08%20at%204.19.56%20pm.png
see how the word ‘enquiries’ is under ’18th AAPSW 2014′, is there anyway to get this all on one line?

3. Thanks for this- the sub menu is now below the main menu but it appears like this:
https://www.dropbox.com/s/nij3ssuq1mesvue/Screen%20Shot%202013-11-12%20at%2010.11.00%20am.png
Can we change this? Either to have the submenu as a dropdown menu or just have blank space underneath the submenu.

Thanks

• This reply was modified 11 years ago by TheProductionHouseEvents.

Hi Yigit,
Thanks so much for your help. The website is really starting to take shape. The last three things I need to change are:

1. Get the sub menu all on one line (see image https://www.dropbox.com/s/bck633ztk84hd6d/Screen%20Shot%202013-11-08%20at%204.19.56%20pm.png)

2. Maintain the while background behind submenu – otherwise it is hard to read when you scroll down (see image: https://www.dropbox.com/s/5lgk0xpo4e27l7m/Screen%20Shot%202013-11-08%20at%204.20.04%20pm.png)

3. When the browser size is reduced the sub-menu goes back to the top of the page.
Is there any way to change this? (see image: https://www.dropbox.com/s/t3ej7h17d89n1fr/Screen%20Shot%202013-11-08%20at%204.25.25%20pm.png)

Thanks!

Hi there,
Is there any way to keep the main menu on top but have the sub menu underneath?

Hi! So Iv’e chosen one of the headers with ‘additional navigation’ and the additional navigation appears at the top of the screen, is it possibe for the additional navigation to be under the main header and to only be available on certain pages?
Thanks!