Change color mobile header menu items

  • Resolved Wohoo123

    (@wohoo123)


    3 years, 5 months ago

    How do I change the color of the menu items (Home, Shop,…) on my mobile header?
    And how can I add a border line bellow the main titles

    To make things clearer I add some structure:

    Home
    Shop
    > Cat 1
    > Cat 2
    Customer support
    > contact
    > privacy policy

    To summarize:
    1) I want to change the color of all this items (on mobile only)
    2) I want to add a border line under Home, Shop and Customer support

    Thanks again for your help

Viewing 1 replies (of 1 total)

  • Hi @wohoo123,

    Thank you for contacting us. I am happy to help with your queries.

    Let’s address them one by one.

    1) I want to change the color of all this items (on mobile only)

    You can manage it from Offcanvas menu color option that is located under your site’s dashboard (/wp-admin) > Customize > Header > Mobile Header > Style.

    2) I want to add a border line under Home, Shop and Customer support

    Try adding this CSS code to Customize > Additional CSS from dashboard. 

    
.woocommerce-shop .page-title,
.woocommerce-account .page-title {
  border-bottom: 2px solid #ccc;
}

    You can use page’s ID selector to add the same style to a specific page. For example: 

    
.page-id-257 .page-title,
.page-id-258 .page-title {
  border-bottom: 2px solid #ccc;
}

    Replace the number that ends .page-id- with your page ID. You can find it on web browser’s address box when you’re on page editing screen. It usually looks like yoursite[DOT]com/wp-admin/post.php?post=257&action=edit

    Hope this reply helps.

    Regards,
    Kharis

Viewing 1 replies (of 1 total)
  • The topic ‘Change color mobile header menu items’ is closed to new replies.