Problem with my navigation bar and mobile/tablet views

  • Unknown's avatar
    florentdiaz · Member ·

    Hi !
    I don’t know how to resolve a problem with my menu,
    I have tried changing the position of my navigation bar, I would like to fix it in the second half at the top of my page.
    In the Desktop’s view all is fine but when I go in tablet’s and mobile’s view I’ve a big difference of position and color of my elements :
    My font become clearer and the menu which was horizontal became Vertical (which is nice) but there is a small gap between my menu and the border of the page, I tried to remove it and for instance add in css margin-left : -20px , it works for my mobile’s view but of course it changes my desktop’s view..
    I’m pretty new in Ccs and I’m not used to create Media Queries so I don’t know how to resolve this..
    If you have a solution it will be greatly appreciated !
    Oh and do you know how to find in wordpress the original Css and not just the blank sheet Css ?
    Thank you !

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    Repositioning elements using CSS is fairly complex, exactly because of the issue you’re encountering here – you’ll need different code for different screen sizes. Unfortunately this type of change is beyond the scope of support we provide for CSS on WordPress.com.

    https://wordpress.com/support/css-support/

    I’ll leave this thread open in case a member of our volunteer community is able to help with this, but otherwise I recommend working with a developer to get the right code for the type of change you’re trying to make.

    That said, I had a quick look at your existing CSS and do have this one suggestion: Instead of using @media handheld, use @media screen and (max-width: 641px) {} and @media screen and (max-width: 480px) {} instead for tablet and mobile screen sizes respectively – those are the breakpoints used in your theme’s style.css file, and using the same breakpoints in your custom CSS will give you the most consistent results.

    We have some information on working with media queries, in case it can help you figure out what other code you need:

    https://wordpress.com/support/custom-css-media-queries/

    Oh and do you know how to find in wordpress the original Css and not just the blank sheet Css ?

    The simplest option here is to use the inspector built into your browser:

    https://wordpress.com/support/how-to-find-your-themes-css/

    You can also go to your theme’s support page at https://wordpress.com/theme/bushwick and download the self-hosted version of the theme at the bottom of that page. That will give you access to the style.css file. But while that file is significant in your theme’s design, it’s not the only thing affecting how elements of your theme is styled. The browser inspector, on the other hand, shows the final CSS for your site once all the different stylesheets, including any custom CSS you’ve already added, has been loaded.

  • The topic ‘Problem with my navigation bar and mobile/tablet views’ is closed to new replies.