Skip to content

Instantly share code, notes, and snippets.

@gstricklind
Created December 10, 2016 18:39
Show Gist options
  • Save gstricklind/2dcfb6c59642ca8ccf1a7c4d79d7d212 to your computer and use it in GitHub Desktop.
Save gstricklind/2dcfb6c59642ca8ccf1a7c4d79d7d212 to your computer and use it in GitHub Desktop.
Tabbed WooCommerce My Account
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
list-style: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
text-decoration: none;
}
@media screen and (max-width: 768px) {
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
margin-bottom: 5rem;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
border: 1px solid rgba(0,0,0,0.1);
border-bottom: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
border-left: 2px solid #000;
font-weight: 600;
color: #000;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
font-weight: 600;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: inline-block;
width: 100%;
padding: 1rem 2rem;
}
}
@media screen and (min-width: 769px) {
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
padding: 1rem 2rem;
display: inline-block;
width: 100%;
-webkit-box-shadow: inset -1px 0px 0px 0px rgba(0,0,0,0.1);
-moz-box-shadow: inset -1px 0px 0px 0px rgba(0,0,0,0.1);
box-shadow: inset -1px 0px 0px 0px rgba(0,0,0,0.1);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
border-left: 2px solid #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-weight: 600;
color: #000;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
font-weight: 600;
}
body.woocommerce-account .woocommerce-MyAccount-content {
padding: 0 3rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment