MAIN MENU on MOBILES (smaller screens)

  • wpcomsites · Member ·

    Hello Taras

    I tried to put everything I would like to customize below. Pls take your time. Im not in a hurry :)
    I know it can be too much asking sometimes. I just want to keep the colors consistent.

    *******

    1) Below items refer to the MAIN MENU on MOBILES (smaller screens).

    a. Change the background color, for the menu and submenus (now everything is in grays)


    b. Change the font/link color (words), for the menu and submenu (now they are white)


    c. Change the color of the social media items (now they are white)


    d. Change the arrow color that opens the submenus (they are white now)


    e. When you touch an arrow, and also where it reads “close menu”, they show an orange highlight. How to customize that color?


    f. Change the color for the text and cross that says “ x Close Menu “

    *******

    2) Now it is about the site, for MOBILES and DESKTOPS…

    a. When you scroll down, on Mobiles, there is an arrow pointing up to go up. How to change its color? Now it is gray.

    b. Similarly, on desktops, there is an arrow and text “Go Up”, also, how to change the color of the arrow and text? Now, they are gray.

    *******

    Many thanks indeed
    Ralf

    The blog I need help with is: (visible only to logged in users)

  • tarasdashkevych · Theme Author ·

    Hi Ralf,

    “Change the background color, for the menu and submenus (now everything is in grays)
”
    – Please use this custom CSS: 

    
/* Colors of toggle sidebar */
.toggle-sidebar {
  background-color: #4ac0c1;
  color: #333333;
}

/* Background color of sub-menus */
.mobile-navigation ul .toggled-on {
  background-color: yellow;
}

    —

    “Change the font/link color (words), for the menu and submenu (now they are white)
”
    – Please use this custom CSS:

    
/* Color of mobile menu links */
.mobile-navigation > .menu li a {
  color: red;
}

.mobile-navigation > .menu li a:hover {
  color: green;
}

    —

    “Change the color of the social media items (now they are white)
”
    – Please use this custom CSS:

    
.toggle-sidebar .jetpack-social-navigation {
  color: blue;
}

    —

    “Change the arrow color that opens the submenus (they are white now)
”
    – Please use this custom CSS:

    
.toggle-sidebar .arrow-icon {
  color: purple;
}

    —

    “When you touch an arrow, and also where it reads “close menu”, they show an orange highlight. How to customize that color?
”
    – I do not see an orange highlight but please try this custom CSS:

    
.mobile-navigation .dropdown-toggle,
.close-toggle-sidebar{
  outline-color: #ffffff;
}

    —

    “Change the color for the text and cross that says “ x Close Menu “”
    – Please use this custom CSS:

    
#close-toggle-sidebar {
  background-color: red;
  color: white;
}

#close-toggle-sidebar:hover {
  background-color: white;
  color: red;
}

    —

    “Now it is about the site, for MOBILES and DESKTOPS…”
    – Please use this custom CSS:

    
#sticky-header #gotop {
  color: yellow;
}

    Let me know if you have any additional questions.

    Kind regards,
    Taras

  • wpcomsites · Member ·

    Everything perfect!!!

    Thank you!!!

  • tarasdashkevych · Theme Author ·

    You are welcome, Ralf :)

    Kind regards,
    Taras

  • The topic ‘MAIN MENU on MOBILES (smaller screens)’ is closed to new replies.