Problem with the menu toggle link

  • Resolved tapiohuuhaa

    (@tapiohuuhaa)


    7 years, 3 months ago

    I get funny result to the menu toggle button. I didn’t get the icons X and three lines working ok in 340×480 and 720×1280 handheld devices.
    in 340×480 just a tiny bug. But in the bigger screen I just by accident got relative workin solution. I just can’t figure, what cause in this CSS the problem:

    /* paavalikko = main menu */

    header#masthead {background-repeat:no-repeat;background-color:rgb(34,30,32);}
    .entry-taxonomy,header.entry-header {display:none;}
    .site-title, .site-branding,.storefront-primary-navigation,.primary-navigation, #menu-paavalikko {border-bottom:none !important; border-top:none !important}
    body {background-color:rgb(195,194,208);}
    .site-title {position:absolute; top:0;left:0;height:125px;color:transparent !important;display:block; width:70%;}
    .site-title a {display:block; width:100%; height:125px;color:transparent !important}/*width:50%; height:60%;position:absolute; top:0; left:0;*/
    body.home #main {background-color:transparent}
    #secondary, #main {margin-top:-30px !important;background: rgba(255, 255, 255, 0.8);padding:25px;}

    @media screen and (max-width:320px) {
    header#masthead {height:100px;background-size:contain;}
    .site-title,.site-title a {height:100px;width:100%;}
    .entry-content h1 {font-size:1.5rem !important;}
    body.home #content .entry-content .n2-section-smartslider {margin-left:-39px;width:300px !important}
    .storefront-primary-navigation {
    position:fixed;bottom:42px !important;width:100%;
    }
    .storefront-primary-navigation button.menu-toggle {
    position:fixed !important;
    width:102px;
    bottom:0px !important;
    left:0px !important;
    /*box-shadow:-3px -3px 3px gray;*/
    z-index:1000000000000000000000000000000000;
    height:70px !important;
    border-radius:0% !important;
    border-width:0 !important;
    border-top:2px solid black !important;
    -web-kit-border-radius:0% !important;
    color:black !important;
    background-color: rgba(255,255,255,1.0) !important;
    }
    .storefront-primary-navigation button.menu-toggle:before {
    height:20px !important;
    }
    .storefront-primary-navigation button.menu-toggle span::before {display:none;}
    .storefront-primary-navigation button.menu-toggle span {
    background-image:url(“https://www.sanaristikkofoorumi.net/kirakka/wp-content/uploads/2019/01/vaakaviivat.png”);
    background-repeat:no-repeat;
    background-position:0% center;
    padding-left:40px;
    padding-top:5px;
    position:relative;
    left:-30px;
    display:inline-block;
    height:30px;
    }
    .storefront-primary-navigation .toggled button.menu-toggle span {
    background-image:url(“https://www.sanaristikkofoorumi.net/kirakka/wp-content/uploads/2019/01/ruksi.png”);
    }

    .storefront-handheld-footer-bar {
    background-color:white;
    border-top:2px solid black;
    box-shadow:-0px -0px 0px gray !important;
    margin-left:98px !important;
    }
    }

    @media screen and (min-width:321px) and (max-width:767px) {
    header#masthead {height:125px;background-size:cover;}
    .storefront-primary-navigation {position:relative !important; top:58px !important;}
    .storefront-primary-navigation li.top-main {border-top:2px solid white;}
    .storefront-primary-navigation .menu-toggle {
    position:relative !important;
    top:-81px; /*top:-81px; left:30px;*/
    }
    .storefront-primary-navigation .menu-toggle:hover {
    color:white !important;
    }
    .storefront-primary-navigation .menu-toggle::before{
    background-color:rgba(100,100,100,1.0) !important;
    height:18px !important;
    width:15px;
    }
    .storefront-primary-navigation .menu-toggle {
    background-color:rgba(34,30,32,1.0) !important;
    color:white !important;
    border-width:0 !important;
    border-radius:0% !important;
    }
    .storefront-primary-navigation .toggled button.menu-toggle::after,
    .storefront-primary-navigation .toggled button.menu-toggle::before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    }

    .storefront-primary-navigation button.menu-toggle span {
    display:inline-block;
    }
    .storefront-primary-navigation .toggled button.menu-toggle span {
    }
    }

    @media screen and (max-width:767px) {
    .storefront-primary-navigation {margin-left:0 !import; padding-bottom:22px;}
    .storefront-primary-navigation li a {padding-left:15px !important; }
    ul#menu-paavalikko-1,ul#menu-paavalikko {
    padding-bottom:19px !important;margin-bottom:-20px !important}
    ul#menu-paavalikko,#primary-navigation, .menu {
    background-color:rgb(34,30,32) !important;background-image:none !important;border-bottom:none !important;}
    .storefront-handheld-footer-bar a {color:black !important}
    .storefront-primary-navigation li {border-bottom:1px solid white !important;}
    .storefront-primary-navigation li li.last {border-bottom-width:0px !important;}
    header#masthead {border-bottom:2px solid white}
    #secondary {
    margin-top:0px !important; padding-top:30px;position:relative; top-50px;}

    /* sivun alaosan linkit */
    div#bottom-links {
    position:fixed;
    height:32px;width:70px;
    right:3px;bottom:20px;
    z-index:1000000000000000000000000000000000;
    }
    }

    @media screen and (min-width:768px) and (max-width:1008px) {
    header#masthead {background-size:cover;}
    }

    @media screen and (min-width:768px) {
    ul#menu-paavalikko li .menu-item a:link, ul#menu-paavalikko li .menu-item a:visited, ul#site-header-cart .widget_shopping_cart_content * {
    color:black !important
    }
    #secondary .widget-title {font-size:1.105rem !important}
    ul#menu-paavalikko,ul#site-header-cart {position:relative;top:22px;}
    ul#menu-paavalikko li ul,ul#site-header-cart li ul {top:55px;}
    ul#site-header-cart .widget_shopping_cart {top:55px !important;}
    div.widget_product_search{top:-38px; position:relative;}
    /*
    ul#menu-paavalikko .menu-item a:link,ul#menu-paavalikko .menu-item a:visited,ul#site-header-cart a:link,ul#site-header-cart a:visited {color:white !important;}*/
    #main {margin-bottom:0px !important;}
    div#bottom-links {height:32px;width:100%;}
    div#bottom-links table {float:right;}
    }

    /** bottom links **/

    div#bottom-links table {width:60px;background-color:transparent !important}
    div#bottom-links * {border-width:0;margin:0;padding:0;}
    #to-top-link img {
    margin-left:3px;height:30px;width:30px;
    }
    #facebook-link img{
    height:30px;width:30px;
    }

    • This topic was modified 7 years, 3 months ago by tapiohuuhaa.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    7 years, 3 months ago

    Some extra notes:

    https://ww.wp.xz.cn/support/topic/problem-with-bottom-line-in-the-main-menu-for-moblile-devices/

    (see the screen capture)

    shows the previous situation. I got with
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);

    45 degree angle off.

    .storefront-primary-navigation .menu-toggle::before{
    background-color:rgba(100,100,100,1.0) !important;
    height:18px !important;
    width:15px;
    }

    I added some background-color, which cause the current behavior.

    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    7 years, 3 months ago

    Sorry – I get the 720x1280px layout fixed.

    But I don’t understand why for 340×480 handheld this doesn’t work as I expect:

    @media screen and (max-width:320px) {
    header#masthead {height:100px;background-size:contain;}
    .site-title,.site-title a {height:100px;width:100%;}
    .entry-content h1 {font-size:1.5rem !important;}
    body.home #content .entry-content .n2-section-smartslider {margin-left:-39px;width:300px !important}
    .storefront-primary-navigation {
    position:fixed;bottom:42px !important;width:100%;
    }
    .storefront-primary-navigation button.menu-toggle::before,
    .storefront-primary-navigation button.menu-toggle span::before,
    .storefront-primary-navigation button.menu-toggle {color:rgb(34,30,32) !important}
    .storefront-primary-navigation button.menu-toggle {
    position:fixed !important;
    width:102px;
    bottom:0px !important;
    left:0px !important;
    z-index:1000000000000000000000000000000000;
    height:70px !important;
    border-radius:0% !important;
    -web-kit-border-radius:0% !important;
    border-width:2px 0 0 0 solid !important;
    border-top-color:rgb(34,30,32) !important;
    background-color: rgba(255,255,255,1.0) !important;
    }
    .storefront-handheld-footer-bar {
    background-color:white;
    border-top:2px solid black;
    box-shadow:-0px -0px 0px gray !important;
    margin-left:98px !important;
    }
    }
    Menu toggle ::before open/close icons are white even if I define for them different color. see https://aijaa.com/tkuvSz

    • This reply was modified 7 years, 3 months ago by tapiohuuhaa.
    Mikko Saari

    (@msaari)

    7 years, 3 months ago

    The color of the menu toggle is not color but background-color. Set

    button.menu-toggle:after, button.menu-toggle:before, button.menu-toggle span:before {
    background-color: #000;
}

    and it appears.

    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    7 years, 3 months ago

    Ok.

    .storefront-primary-navigation button.menu-toggle::before,
    .storefront-primary-navigation button.menu-toggle span::before,
    .storefront-primary-navigation button.menu-toggle::after,
    .storefront-primary-navigation button.menu-toggle span::after {
    background-color:rgb(34,30,32) !important;
    }
    …
    .storefront-primary-navigation button.menu-toggle {
    …
    color:rgb(34,30,32) !important;
    background-color:#fff !important;
    }
    really solved the problem and I get colors, which I intended.
    Thank’s. I just can’t understand the behaviors of ::before/::after and I would not ever test (almost) black as background-color.

    • This reply was modified 7 years, 3 months ago by tapiohuuhaa.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Problem with the menu toggle link’ is closed to new replies.