Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #187597

    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.

    #188202

    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

    #190381

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

    #190388

    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

    #190391

    perfect! Thank you so much

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Custom sub-menu visible over search bar’ is closed to new replies.