Support » Theme: Customizr » How to change my drop-down list for my child pages in customizr?

  • athbot

    (@athbot)


    Hello i’ve been trying to build a site with the customizr theme and i would like to knowhow to transform my drop-down menu list ( https://www.dropbox.com/s/xcqvytf3qwsymik/child%20menu.jpg ) to something that does not look like it came out of a comic.I have an example website that i have ssen (not mine) to show it’s http://ecignificant.com/ and i would like it to like this one when hovering above tips and info. Mine is the default i believe for the customizr. Iknow this probably has been answered before butsome pointes (code , examples ) would be very welcome .
    Thanks in advance.

Viewing 9 replies - 1 through 9 (of 9 total)
  • They’re using Superfish plugin

    Mine is the default i believe for the customizr.

    Your image doesn’t look like the default to me. Your parent menu is in a “well”. You have some CSS somewhere that is changing it.

    I would like to make a coorection about my theme, it’s the customizr child theme, and @electricfeet i checked and removed all the CSS changes i had done and the drop down menu was still the same.
    @rdellconsulting i ‘ll be checking their website to see if i can use it.Haven’t anything like that before so i’ll come back with either results or more questions.

    Thanks in advance.

    Hello , i would to ask something , as there has been some changes , to the website design, now what is looks like is this testing site
    and what i would like to do is movethe final windows that says Tecnoalarm and Nova Security forward a bit so that i can see the two options behind it clearly. Can it be done and how?
    Also this the CSS code till far

    /*changing color for header start*/
    header.tc-header {
    min-height: 40px;
    background: #7E8484;
    border-bottom: 1px solid #7E8484
    border-top: 1px solid #7E8484
    }
    /*changing color for header end*/
    
    /*changing color for social icons start*/
    .social-block a,
    .social-icon { color: #0000FF; }
    .social-block a:hover,
    .social-icon { color: #FF0000; }
    /*changing color for social icons stop*/
    
    /* Adjust Menu (red) text color, (Times New Roman) font-family, (1.5em) font-size  */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a {
    display:       inline;
    color:          red;
    font-family:    TimesNewRoman;
    font-size:      1.5em;
    font-style: italic;font-weight:bold;
    padding:        1px 10px;
    }
    /*  Adjust Navbar Box settings      */
    .navbar .navbar-inner {
    background-color:   red;
    background-image: linear-gradient(to bottom, white, #F2F2F2);
    background-repeat: repeat-x;
    border:           3px solid lightgray;
    border-radius:    15px 15px 15px 15px;
    box-shadow:       50px 30px 30px rgba(0, 0, 0, 0.067);
    min-height:       20px;
    padding-left:     20px;
    padding-right:    20px;
    }
    
    .btn-navbar {
    width:          90px;
    height:         30px;
    vertical-align: top;
    }
    
    .btn-navbar:after {
    content:        "Menu";
    float:          right;
    margin:         -16px 0 0 0;
    }
    ul.nav li.dropdown > ul.dropdown-menu {
        padding-top: 3px;
        margin: 0;
        }
    .nav > li > a.a-caret {
        display: block;
        padding: 8px;
        position: absolute;
        height: 10px;
        width: 10px;
        top: 1px;
        left: 10px;
        }
    .nav > li > a.a-stripped {
        padding: 5px 2px 5px 38px;
        }
    .navbar .nav .dropdown-toggle .caret {
        margin-top: 10px;
        margin-left: 5px;
        }
    .navbar .nav > li > .dropdown-menu:before {
        left: 3px;
        }
    .navbar .nav > li > .dropdown-menu:after {
        left: 3px;
        }
    .navbar .navbar-inner {
        box-shadow: 0 2px 15px rgba(0,0,0, 0.12);
        }
    /*Triangle under navbar fixed*/
    .navbar .nav > li > .dropdown-menu:before {
        border-bottom: 1px solid rgba(153, 153, 153, 0.27);
        }
    .navbar .nav > li > .dropdown-menu:after {
        border-bottom: 1px solid rgba(255,255,255,.9);
    /*Triangle under navbar fixed*/
        }
    .navbar .nav li.dropdown.open > .dropdown-toggle,
    .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle {
        background-color: #ececec;
        border-radius: 12px;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
        }
    @media (min-width: 980px) {
        ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu,
        ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
        ul.nav li.dropdown ul.dropdown-menu:hover {
            display: block;
            z-index: 1001;
            }
        }
    @media (max-width: 979px) {
        .nav > li > a.a-caret {
            box-shadow: 0 2px 3px rgba(0,0,0,.35);
            height: 2px;
            width: 2px;
            top: 2px;
            left: 5px;
            }
        .nav > li > a.a-stripped {padding-right: 45px; padding-left: 45px;}
        ul.nav li.dropdown.open ul.dropdown-menu  {
            background-color: #ececec;
            border-radius: 4px;
            box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
            }
        .dropdown-submenu > a:after {
            border-left-color: transparent;
            border-top-color: #ccc;
            border-width: 5px 5px 0 5px;
            }
        .dropdown-submenu:hover > a:after {
            border-top-color: #fff;
            }
        .dropdown-submenu:hover > a:after {
            border-left-color: transparent;
            }
        ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu ul.dropdown-menu {
            background-color: black;
            box-shadow: inset 0 1px 4px rgba(0,0,0,.27);
            display: block;
            position: relative;
            margin-right: 4px;
            bottom: 2px;
            }
        ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu:hover > a {
            color: white;
            }
        }
    .navbar .nav li.free_download.btn {
    position: relative; bottom: 10px;
    padding: 2px; line-height: 19px;
    vertical-align: middle;
    }
    .navbar .nav li.free_download.btn a {
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31);
    padding: 3px 13px;
    }
    .btn-navbar {
    width:          90px;
    height:         30px;
    vertical-align: top;
    }
    
    .btn-navbar:after {
    content:        "Menu";
    float:          right;
    margin:         -16px 0 0 0;
    }
    .format-icon:before {
    	speak: none;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      padding-right: 10px;
      opacity: 0.2;
      position: relative;
      top: 8px;
      display: none;
      font: normal normal 1.2em/1
    'entypo';
    font-family:    TimesNewRoman;
    }
    .dropdown-menu {
        background-clip: padding-box;
        background-color: #F2F2F2;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: right;
        left: 0;
        list-style: none outside none;
        margin: 2px 0 0;
        min-width: 160px;
        padding: 5px 0;
        position: absolute;

    Thanks in advance.

    Overview:
    http://www.wproots.com/how-to-style-wordpress-menus-dropdowns/

    In your case, something of the sort should work:
    Try adding this to your custom css, or your child theme style.css

    .dropdown-menu li ul.dropdown-menu {
      top: 0px;
      left: 160px;
    }

    Adjust those values to suit your needs.

    Hope this helps

    Thanks you very much i’m starting to get somewhere, i’ll tweak it as you said , it’ been very helpfull , i’ll also be digging to the site you linked very good information , thank you, i’ll be back with updates.

    Hello , after a lot of tinkering and failures,and many thanks @d4z_c0nf from above for the fix he offered and worked, i have reached at the way i want my navigation bar and dropdown menus to look.Although i still have a problem. As you can see in the picture ( https://www.dropbox.com/s/9t951phnvckolod/nav_bar.jpg) my main navbar is set with colors i want, but the first dropdown menu instead of being all gray i have white borders on top and bottom which i want it to be all gray. I have tried seing the code from chrome and have managed to see what i should be changing but when i try to change it at the style.css file i always fail.Although i have managed to do it at the second drop down as it shows in the picture i can’t do it at the first.This is my style.css file

    /*changing color for header start*/
    header.tc-header {
      min-height: 40px;
      background: #7E8484;
      border-bottom: 10px solid #7E8484
      border-top: 15px solid #7E8484
    }
    /*changing color for header end*/
    
    /* Adjust Menu (red) text color, (Times New Roman) font-family, (2.0em) font-size start  */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a {
      position:       relative;
      top:            -20px;            /* Adjust using -1px move Up, 1px move Down, 0px No change  */
      display:       inline;
      color:          red;
      font-family:    TimesNewRoman;
      font-size:      2.0em;
      font-style: italic;
      font-weight:bold;
      padding:        15px 15px;
    }
    /* Adjust Menu (red) text color, (Times New Roman) font-family, (2.5em) font-size end  */
    
    /*  Adjust Navbar Box settings start  */
    .navbar .navbar-inner {
    background-color:   red;
    font-family:    TimesNewRoman;
    font-size:      1.0em;
    background: #E5E5E5;
    background-repeat: repeat-x;
    border:           5px solid darkgray;
    border-radius:    20px 20px 20px 20px;
    box-shadow:       50px 30px 30px rgba(0, 0, 0, 0.067);
    min-height:       15px;
    padding-left:     55px;
    padding-right:    45px;
    padding-bottom:   5px;
    }
    /*  Adjust Navbar Box settings end  */
    
    /*  Reposition Navbar Box - change top/left as needed start */
    .navbar.notresp .navbar-inner {
    position:       relative;
    top:            3px;            /* Adjust using -1px move Up, 1px move Down, 0px No change  */
    left:           -5%;             /* Adjust using -1% move Left, 1% move Right, 0% No change  */
    }
    /*  Reposition Navbar Box - change top/left as needed end */
    
    /* Change Slider Titles (2em) font-size, (TimesNewRoman) family, (blue) color start */
    .carousel-caption h1 {
    font-family:    TimesNewRoman;
    font-size:      2em;
    color:        blue;
    }
    .carousel-caption p {
    font-family:    TimesNewRoman;
    font-size:      2em;
    color:        green;
    }
    .carousel-caption .btn {
    font-family:    TimesNewRoman;
    font-size:      2em;
    color:        yellow;
    }
    /* Change Slider Titles (2em) font-size, (TimesNewRoman) family, (blue) color end */
    
    /* Adjust dropdown Menu items start */
    .dropdown-menu > li > a {
    font-family: TimesNewRoman;
    font-style: italic;
    font-weight: bold;
    font-size: 1.6em;
    color:          red;
    background:     #e5e5e5;
    top: 38%;
    left: 5px;
    }
    /* Adjust dropdown Menu items end */
    
    /* for the second drop-down start */
    .dropdown-menu li ul.dropdown-menu {
    top: 1px;
    left: 161px;
    background-color: #e5e5e5;
    }
    /* for the second drop-down end */
    
    /*Triangle under navbar fixed*/
    .navbar .nav > li > .dropdown-menu:before {
        border-bottom: 1px solid rgb(225, 225, 225);
        background-color: #e5e5e5;
        }
    .navbar .nav > li > .dropdown-menu:after {
        border-bottom: 1px solid rgb(225, 225, 225);
        background-color: #e5e5e5;
    /*Triangle under navbar fixed*/
    
    /* Change color of the button Read More start */
    .btn-primary,.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
    .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    color: yellow;
    background-color: #005580;
    font-style: bold;
    font-family: TimesNewRoman;
    }
    /* Change color of the button Read More end */

    Could you please tell me what i should change and how because i can’t seem to find it. Thanks in adnvance.

    How can we add dropdown menu in x theme
    I want this type of dropdown menu example hofindia.com

    @janardanparihar as per the forum welcome, please open your own thread and include a link to your site.

    And clarify, do you mean add the picture menu to Czr?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to change my drop-down list for my child pages in customizr?’ is closed to new replies.