Custom CSS don’t display correctly my menue bar on mobile version

  • Anonymous User 18004331

    (@anonymized-18004331)


    4 years, 6 months ago

    Hello everyone,
    I have an issue on my website built with Chosen by Compete Theme. I wanted to move the menu-primary-items, so I did it on the Appearence/Custom CSS using SiteOrigin CSS .

    So here is the final code which makes me happy on desktop website :
    .logo {
    width: 480px;
    }

    #menu-primary-items.menu-primary-items {
    position: absolute;
    top: 280px;
    right: 0px;
    left: 450px;
    width: 520px;
    }

    .post-title {
    display: none;
    }

    The issue I have is that on mobile device, the menue bar become a drop down menue, and the changes I’ve done on the custom CSS make the menue not fully readable on mobile device. I can see just 2 sections menue out of 5 sections menue. Do you have an idea on how can I solve this issue ?

    Thank a lot,

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for using Tracks!

    Using a media query should solve this issue for you. Tracks switches from the mobile menu to the desktop menu when the screen is 800px or wider, so you can wrap your code in a media query so that it only affects the site when the screen is 800px or wider.

    Here’s an example:

    @media all and (min-width: 800px) {

  .menu-primary {
    property: example;
  }
}

    Just replace the pseudo-code in the middle with your CSS and it should work well.

Viewing 1 replies (of 1 total)
  • The topic ‘Custom CSS don’t display correctly my menue bar on mobile version’ is closed to new replies.