Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 13, 2013 at 3:29 am #187597
    TheProductionHouseEvents

    Hi there.

    The website is:
    http://plpl3750.staging-cloud.netregistry.net/wp-login/upcoming-events/18th-aapsw-2014
    There is a custom sub-menu on this page and the child pages under it^^

    The text within the sub menu appears over the search bar when the magnifying glass icon is clicked.
    See screenshot below:
    https://www.dropbox.com/s/s3x0qg1jie02tvd/Screen%20Shot%202013-11-13%20at%2012.25.19%20pm.png

    any help would be great! thanks.

    November 14, 2013 at 4:29 am #188202
    Ismael

    Hi TheProductionHouseEvents!

    How did you move the submenu at the bottom? You need to add a z-index on header_main that is higher than the z-index of #header_meta.

    #header_main {
z-index: 21;
}

    The problem is it will cover up the sub-menu. Please post the code you use to move the submenu below.

    Best regards,
    Ismael

    November 19, 2013 at 12:49 am #190381
    TheProductionHouseEvents

    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; } }

    November 19, 2013 at 12:59 am #190388
    Yigit

    Hey!

    :) Please add following code to Quick CSS as well

    #header_meta { z-index: 1; }
#header_main { border-bottom-style: none; }
.container_wrap { border-top-style: none; }
#header .avia_mega_div { top: 80%; }
.avia-menu-fx { display: none; }

    Should look like this after all changes http://i.imgur.com/ShXeLg3.jpg

    Best regards,
    Yigit

    November 19, 2013 at 1:02 am #190391
    TheProductionHouseEvents

    perfect! Thank you so much

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Custom sub-menu visible over search bar’ is closed to new replies.