1

So I'm developing a web page, and I'm making it now responsive. I managed to get everything responsive except the main menu nav.

It's a ul element and it has li inside with text. Here are some pictures about the problem

Full webpage:

enter image description here

On mobile:

enter image description here

I just want to adjust the text or the ul element to fit without making another line.

Here's the css ul element:

.main-menu ul {
    display: table !important;
    background-color: #98B709;
    padding: 0;
    margin: 0;
    text-align: center;
}

And the li element:

.main-menu ul li {
    display: inline-block;
    float: left;
    position: relative;
    list-style: none;
}

I tried a lot of things but nothing works...

Thanks and hope you guys can help me!

Hamza Zafeer
  • 2,360
  • 13
  • 30
  • 42
Manel Alonso
  • 397
  • 3
  • 11
  • you can move your navigation in a burger menu – Mohammad Usman Apr 28 '16 at 12:38
  • Reduce the `width`, `font-size`, `padding` or `margins` of the `li` elements (for which I doubt will fit all in one line). Or put every `li` in a new line making it take full width. Or make a toggle button with a sidebar opening. – Vucko Apr 28 '16 at 12:40

3 Answers3

1

I found a very useful Stackoverflow post that should answer your question:

Responsive Font Size

And I experienced that changing font size and other problematic parts from px to em generally helps to make is more responsive too.

Community
  • 1
  • 1
sebisnow
  • 1,671
  • 17
  • 26
0

Try to use different font size e.g

vw Relative to 1% of the width of the viewport

vh Relative to 1% of the height of the viewport

Ryuk
  • 75
  • 7
0

Here is a variation that does not use display:table, which I always avoid.

The important bit you can play with is the 'width' of the 'li' element. If you really want to squash them all on one line, you can make this a very small %.

If you do use the second line, the 'text-align:center' in the 'ul' element will keep everything centered, instead of floating left as you have it now.

I use this code block all the time; it's a common problem.

#main{
width:100%;
}

#main ul {
display: block;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}

#main li {
width:10%;
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
}
elendee
  • 11
  • 1
  • 3