Logo & Menu in Mobile Version of free Virtue Theme

  • Hello, I have the free version of Virtue Theme (it’s awesome). My website is thewayofthewrap.com

    1) My logo is not responsive in mobile. I have the size set to a max of 500px for desktop, and the size is perfect for desktop. What css code can I add to make the logo responsive for mobile while keeping its size for desktop?

    2) My menu keeps disappearing on mobile. The word “menu” is there, but when I click it, I get a blank drop down, so I can’t actually see the menu options. If I click anywhere in the dropdown, it takes me to the corresponding page from the menu, but I can’t actually SEE the words.

    3) Is there a way to change the color of the mobile menu BEFORE clicking it? I have my mobile menu color set to black, and it is black, once I click it. Before I click it the background is white.

    Any help would be greatly appreciated!!!

Viewing 7 replies - 1 through 7 (of 7 total)

  • 1. Try wrapping the CSS you’ve added in media query like this:

    @media (min-width: 992px)  {
#thelogo img {
    max-width: 500px;
    }
}

    2. The menu is appearing, but your font colors are clashing. You can change the font color of the mobile menu in Theme Options> Menu Settings and set “Mobile Menu Font” to something that is different than the background of the menu.

    3. You can change the mobile menu dropdown’s background by using this CSS:

    .mobileclass.collapsed {
    background: red;
}

    Let me know if this is helpful!

    -Kevin

    Thread Starter afrikablam

    (@afrikablam)

    Thank you so much! Worked perfectly!

    Can I ask a couple more questions?
    1) How can I remove the lines between the menu options on the desktop version?
    2) How can I remove the title “Contact Us” from the contact form on the page https://www.thewayofthewrap.com/contact-us

    Just want to let you know that you guys are great. I love the theme, and I’ve been able to figure out quite a lot of things by searching through your support forum.

    1. Try adding this CSS to Theme Options> Advanced Settings:

    #nav-main ul.sf-menu > li {
    border: none;
}

    2. You can remove the title of the contact form within the contact page edit screen. Under “Contact Page Options,” find “Contact Form Title,” and just delete whatever text is in there.

    Let me know if this works for you!

    -Kevin

    Thread Starter afrikablam

    (@afrikablam)

    The code worked perfectly!!!

    Thanks for the contact form thing, didn’t see that option before.

    You guys have been so helpful! My site is coming along great ??

    Glad to hear it! Feel free to post new topics with any future questions you might have!

    -Kevin

    ok im sorry for adding to this but i have to ask a huge favor, i checked your site out and i need to ask how did you get your slider image to be full width, i have had this issue from day 1, is it the images im using that arnt full width?

    my site is https://www.dirtycultre.com.au

    thanks and sorry again if ive done this the wrong way

    Thread Starter afrikablam

    (@afrikablam)

    This is what I did:

    Go to THEME OPTIONS –> HOME SLIDER SETTINGS –> Choose a Home Image Slider –> Full width

    Also, your image does need to be big enough. So for example under HOME SLIDER SETTINGS, check Slider Max Height, and Slider Max Width. Mine is 400 x 1170, so I made my photo the same dimensions.

    Goodluck!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Logo & Menu in Mobile Version of free Virtue Theme’ is closed to new replies.