WordPress.org

Forums

Customizr
How to change my drop-down list for my child pages in customizr? (10 posts)

  1. athbot
    Member
    Posted 1 year ago #

    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.

  2. rdellconsulting
    Member
    Posted 1 year ago #

    They're using Superfish plugin

  3. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  4. athbot
    Member
    Posted 1 year ago #

    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.

  5. athbot
    Member
    Posted 1 year ago #

    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.

  6. d4z_c0nf
    Themes & Co support
    Posted 1 year ago #

    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

  7. athbot
    Member
    Posted 1 year ago #

    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.

  8. athbot
    Member
    Posted 8 months ago #

    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.

  9. janardanparihar
    Member
    Posted 5 months ago #

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

  10. rdellconsulting
    Member
    Posted 5 months ago #

    @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?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic