-
Posts
-
Hi there,
I want to create a mini menu at the top of two of my pages. The mini menu will link to child pages under that parent page.
The mini menu needs to be at the top of the page and stay there even if the user scrolls down. The two pages I need the mini menus for will have different pages linking to their respective mini menus.
These will be a third layer of pages for example Upcoming Events> AAPSW 2014 > Speakers. The mini menu will be on ‘AAPSW 2014’ and it will link to ‘speakers’.
Let me know if you need me to explain anymore.
Hi TheProductionHouseEvents!
Please post a screenshot and show what you would like to achieve
Best regards,
YigitSimilar to this website but still maintain the main menu at the top
http://www.plasticsurgeryworkshop.com/index.cfm?page=PlasticSurgery2013
Hey!
You can choose to display one of the header types that displays additional navigation in Enfold theme options under Header tab. Then we can post the link to your website and we can provide you CSS code to make it fullwidth
Regards,
YigitHi! 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!Hey!
Can you post the link to your website and point out pages you would like to display it?
Best regards,
YigitThanks Yigit!
The website it http://plpl3750.staging-cloud.netregistry.net/wp-login/
The page that I would like to have a seperate menu for is http://plpl3750.staging-cloud.netregistry.net/wp-login/18th-aapsw-2014
( it is not currently available in the main menu as it is a work in progress)Do you need the pages that will be linked to the separate heading?
Hey!
Please add following code to Quick CSS in Enfold theme options under Styling tab
.page-id-2528 .main_menu { display: none; } .page-id-2528 .sub_menu li { padding: 0 50px; top: 30px; font-size: 16px; }That will remove main menu and increase font-size, padding and position of sub-menu only on “18th-aapsw-2014” this page. For other pages you need to add page ID’s to custom css as well
Regards,
YigitHi!
I am not sure that i understood you clearly. Would you like to keep main menu in its position but move sub-menu right under it?
Best regards,
YigitHi!
Please add following code to Quick CSS in Enfold theme options
.sub_menu { top: 390%; } .header-scrolled .sub_menu { top: 270%; }Cheers!
YigitHi 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!
1) Sorry did not understand it clearly. Can you elaborate?
2) Please add following code to Quick CSS as well..header-scrolled .header_color .sub_menu>ul>li>a { font-color: white!important; }This will change the font color to white when scrolled down. Having background and resizable header is not that easy to pull off unfortunately
3).responsive #header .sub_menu { position: absolute; }That shoud do it
Regards,
YigitHi 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
Hi!
1) Please add following code as well
.page-id-2528 .sub_menu li { padding: 0 44px; }3)
@media only screen and (max-width: 480px) { .page-id-2528 .sub_menu li { padding: 0 5px; } .content { padding-top: 90px; } }It should look like this http://i.imgur.com/K6rUACX.jpg
Cheers!
YigitAlso, 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?
Hey!
I just checked your website on my iphone 4 and sub-menu does not overlap menu. Can you post a screenshot?
Please try adding following code to Quick CSS@media only screen and (max-width: 480px) { .page-id-2528 .sub_menu { display: block; } .sub_menu { display: none; } }Best regards,
YigitHi! this CSS fixed both issues! The sub-menu now only appears on the 18 AAPSW page.
How can I get the sub-menu to appear on the 18 AAPSW child pages? Im happy to edit the CSS with the appropriate page numbers but if you could give me the CSS that would be fantastic.Hey!
You can right click on Chrome and on Firefox and click Inspect Elements to find out page ID’s http://i.imgur.com/TrDQ84Y.jpg
You should add them in such form@media only screen and (max-width: 480px) { .page-id-2528 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; } .sub_menu { display: none; } }to display on any page you would like
Regards,
YigitPerfect 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?
Hey!
I updated the code in my previous post. Please try it now and flush browser cache after applying the code to Quick CSS
Best regards,
YigitHi Yigit, thanks, the menu also looks funny at these widths (see images).
- The topic ‘Mini heading in Page’ is closed to new replies.