How to keep the main menu in the same section in responsive site

[newcoder1010]

Hello,

 

I have a main menu. I see it in right location when i visit it in laptop. However, when I start making screen smaller, i see menu goes to next row. Instead, I would like the menu to be responsive where it was originally. If you could please inspect in chrome and advise me with css.

 

image

my site

 

Thanks much.

Edited December 31, 2016 by newcoder1010

[davej]

It isn't obvious to me what you want. The use of media queries is quite simple.

 

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (max-width: 480px) {
    body {
        background-color: green;
    }
}
@media screen and (min-width: 481px) and (max-width: 800px) {
    body {
        background-color: red;
    }
}
@media screen and (min-width: 801px) {
    body {
        background-color: blue;
    }
}

[dsonesuk]

You can't have it where it is on smaller devices because it just won't FIT! The logo either has to disappear, made so small you can't identify what it is or read the text (which in my opinion should be text on its own for SEO purposes), or placed above menu, we are talking about screen sizes which can be small like 320 to 480px. You have to keep menu font-size to reasonable size for these smaller devices to select them easily, so something has to give.

 

What I suggest is at certain size the image logo at present location, is hidden and a smaller image is displayed within contact us area.

[Billz]

hello davej i need your help.