Header Css Problem on Small screen devices

Screenshots -

It's a known issue caused by adding things to your header.

You can either remove some links, or add some custom CSS to work around it.

or you can make a "group" of sub-button (see https://flarum.it for live example)

wow! Flarum.it has a good width size. Can I please get custom CSS code ... I tried to copy from other discussions but it was only for the header.

xasharma
Is something like

.container{
    width: 70%;
}

Thanks ... it worked !

But it affected the mobile phone (small screen devices)

xasharma If you don't want it to apply to mobile, you can change the CSS so it looks like this

@media (min-width: 768px) {
  .container {
    width: 70%;
  }
}

xasharma as phenomlab says you need to wrap this code into a media query

Thank you ... it worked.