CSS උදව්වක් ඕනේ.. changing wordpress menu color on mobile

rukshrulz

Well-known member
  • Jul 16, 2013
    8,149
    13,367
    113
    Colombo
    මේ sub menu items වල color එක change කරන්නෙ කොහොමද? mobile එකේ විතරයි change වෙන්න ඕනෙ. site-wordpress. පුලුවන් කෙනෙක් ඉන්නව නම් කියන්න site එකේ link එක දෙන්නම් element class ටික බලාගන්න.

    image.png
     

    anuradhamapa

    Well-known member
  • Aug 23, 2006
    13,256
    3,418
    113
    මේ sub menu items වල color එක change කරන්නෙ කොහොමද? mobile එකේ විතරයි change වෙන්න ඕනෙ. site-wordpress. පුලුවන් කෙනෙක් ඉන්නව නම් කියන්න site එකේ link එක දෙන්නම් element class ටික බලාගන්න.

    image.png
    mega menu kiyala plugin eka tiyenawa. eken hadapan.
     

    Lakshan-Seram

    Well-known member
  • May 31, 2011
    23,973
    11,929
    113
    127.0.0.1:8080/Kandy
    @media (max-width: 768px) { .hfe-submenu-container { background-color: #ff0000; } }

    hari element eka hoyaganna ba bn.
    Item wala text color eka da?

    if so, anchor tag ekata css rules balanna.

    max-width 768px hari. A media query eke liyanma oyata one color eka.

    den inne eliye. Theme eke nama kiwwoth gedara gihin balanna puluwan
     

    rukshrulz

    Well-known member
  • Jul 16, 2013
    8,149
    13,367
    113
    Colombo
    Item wala text color eka da?

    if so, anchor tag ekata css rules balanna.

    max-width 768px hari. A media query eke liyanma oyata one color eka.

    den inne eliye. Theme eke nama kiwwoth gedara gihin balanna puluwan
    text color eka change wenwa meka gahuwama. but background eka change wenne na "background-color: #ff0000;" gahuwata. mata one background color eka change karanna.

    CSS:
    @media (max-width: 768px) {
    .hfe-sub-menu-item
     {
        color: #ff0000;
      }
    }

    image.png


    astra theme. elementor header and footer builder plugin.
     

    Amith0424

    Well-known member
  • Oct 27, 2010
    9,391
    16,762
    113
    ℒ𝓸𝓬𝓪𝓽𝓲𝓸𝓷
    text color eka change wenwa meka gahuwama. but background eka change wenne na "background-color: #ff0000;" gahuwata. mata one background color eka change karanna.

    CSS:
    @media (max-width: 768px) {
    .hfe-sub-menu-item
     {
        color: #ff0000;
      }
    }

    image.png


    astra theme. elementor header and footer builder plugin.
    අගට !important; දාගන්න.
     

    Lakshan-Seram

    Well-known member
  • May 31, 2011
    23,973
    11,929
    113
    127.0.0.1:8080/Kandy
    text color eka change wenwa meka gahuwama. but background eka change wenne na "background-color: #ff0000;" gahuwata. mata one background color eka change karanna.

    CSS:
    @media (max-width: 768px) {
    .hfe-sub-menu-item
     {
        color: #ff0000;
      }
    }

    image.png


    astra theme. elementor header and footer builder plugin.
    anchor ekata liyala hariyanne netiwei li item ekata liyala balanna. Oya border eka tiyena element eka hoyaganna. Wena rule ekakin override wenawa nam !important try karala balanna. Not recommend btw
     

    rukshrulz

    Well-known member
  • Jul 16, 2013
    8,149
    13,367
    113
    Colombo
    CSS:
    .elementor-2446 .elementor-element.elementor-element-d5ccfab nav.hfe-dropdown .menu-item a.hfe-sub-menu-item

    meka thama selector eka. but oya balanna elementor wala settings athi oke colors change karanna.
    CSS:
    .elementor-2446 .elementor-element.elementor-element-d5ccfab nav.hfe-dropdown .menu-item a.hfe-sub-menu-item {
        background: #fff !important;
    }

    image.png


    noice. gammac thamai. :love:
     

    Al Baik

    Well-known member
  • Jan 5, 2011
    10,850
    8,044
    113
    Ohio, USA
    you can use the CSS :hover pseudo-class selector along with nested CSS rules. This will allow you to apply different styles to the sub-menu items when the main menu is hovered.

    Assuming you have a typical HTML structure for a navigation menu with sub-menus, here's how you can achieve it:

    HTML:
    <nav> <ul class="main-menu"> <li><a href="#">Home</a></li> <li> <a href="#">Products</a> <ul class="sub-menu"> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>


    CSS:
    /* Styles for the main menu items */ .main-menu li a { display: block; color: #000; /* Change this to the desired color for the main menu items */ text-decoration: none; padding: 10px; } /* Styles for the sub-menu items, initially hidden */ .sub-menu { display: none; } /* Show the sub-menu on hover */ .main-menu li:hover .sub-menu { display: block; } /* Styles for the sub-menu links */ .sub-menu li a { color: #ff0000; /* Change this to the desired color for the sub-menu items */ }



    In the CSS code above, we use the .main-menu li:hover .sub-menu selector to target the sub-menu when its parent (main menu item) is being hovered. This allows us to change the display property of the sub-menu and make it visible when the main menu item is hovered. The .sub-menu li a selector is then used to target the anchor tags within the sub-menu and change their color to the desired color.

    Replace the #000 and #ff0000 with your preferred colors for the main menu and sub-menu items, respectively. This way, when you hover over a main menu item, its corresponding sub-menu will appear with the specified color for the sub-menu items.
     
    • Like
    Reactions: rukshrulz