[Kyle]

I am trying to make some adjustments for the mobile site of asucolorado.com. I have installed a child theme that already has successful customization on it. On the mobile site i’d like to make the following changes:

1. Center the site logo so that it does not get jumbled with the navigation button
2. In the site navigation i’d like to change the colors of the subcategory box so they stand out better

To solve item 1 I tried the code:

@media screen and ( max-width: 940px ) {
#logo-wrap {
margin: 0 auto;
float: none;
display: block;
}
}

Any help is greatly appreciated

[wensolutions]

Hello Kyle,

Based on your request for logo adjustments and dropdown menu color we have
prepared a custom CSS to achieve these changes. Please note that the
following CSS are for mobile only and would take effect in mobile portrait and landscape view upto screensize 640px.

@media only screen
and (min-device-width : 320px) and (max-device-width : 640px) {

/*for centering logo*/

.site-branding{
	text-align: center;
}
.header-top{
	float: none;
	text-align: center;
}

/* for dropdown menus */

#site-navigation ul ul{
	background-color: #FFB310;

}

#site-navigation ul ul a{
	border-bottom: 1px #d8960a solid;
} 
#site-navigation ul ul li a:hover,
#site-navigation ul ul li.current_page_item a, 
#site-navigation ul ul li.current-menu-item a, #site-navigation ul ul li:hover > a, 
#site-navigation ul li li.menu-item-has-children:hover > a::before,
#site-navigation ul li li.page_item_has_children:hover > a::before{
	color: #7c7a75;
}
}

Hope this helps!

[Kyle]

Thanks for the code. It successfully centered just the mobile header. I wasn’t able though to get the navigation arrows on the mobile menu to change the color. Take a look at the image to see the result I am trying to accomplish:

[wensolutions]

Hi,

Following CSS code would change the arrow background and arrow color itself. Try pasting the following custom CSS in your style.css.

.mm-list a.mm-subclose::before, .mm-list a.mm-subopen::after {
   border-color: rgb(255, 0, 0) !important; /* arrow color */
}
.mm-list a.mm-subopen {
  background: rgb(255, 209, 26) none repeat scroll 0 0; /* arrow background color */
  border-bottom: 1px solid black;
}

Let us know if you need any help !

Regards
WS

[Author]

Posts