Navigation Bars – Look Funky on smaller screens…

Community Forums Forums Design Tips and Tricks Navigation Bars – Look Funky on smaller screens…

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  anitac 1 year, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #44720

    ilya
    Participant
    Post count: 5

    Hi there! Thanks in advance for your help. Here is my question:

    I downloaded and installed the navigation bars from the studiopress website, on a website running news childtheme, but for some reason, they behave very strangely on small screens. They get misaligned and cut off the entire right side of the page. I think I need to make them responsive somehow.

    My Site is: http://hola-china.net/genesis/

    I got the bars from here: http://www.studiopress.com/graphics/navigation-bars

    Thank you!

     

    http://hola-china.net/genesis/
    #44730

    anitac
    Participant
    Post count: 7027

    The nav bar images are not responsive. Therefore, you need to reconfigure them under the media queries to either do 1) use a regular colored background or 2) add CSS to make the background images responsive.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #44744

    ilya
    Participant
    Post count: 5

    Hi Anitac!

    I figured that would be the case. I am not sure where to start on this. Any suggestions on how to do the CSS?

    Thanks!

    #44748

    anitac
    Participant
    Post count: 7027

    Go down into the Media Queries and add this to each mobile device:

    [css]
    #nav {
    background: none repeat scroll 0 0 #000000;
    }[/css]

    That’s the easiest solution I would make without trying to configure different sizes for the images which could be a nightmare.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.