Make Header Links Bar Mobile Friendly

HTML & CSS
1

Hi there,

I’m using a theme for my site but wanting to add a banner above the header with links to the main site categories. Here is the HTML I have come up with:

<div id="topmenu">
				<ul>
					 <li><a href="/">Link 1</a></li>
					 <li><a href="/">Link 2</a></li>
					 <li><a href="/">Link 3</a></li>
					 <li><a href="/">Link 4</a></li>
					 <li><a href="/">Link 5</a></li>

				</ul>
</div>

And then of course the CSS

#topmenu {
	overflow: hidden;
	padding: 0px 0px;
	margin: 0px auto;
	width: 100%;
	height: 34px;
	background: #000;
	text-align: center;
}

#topmenu ul {
	margin: 0px 0px;
	padding: 0px 0px;
	margin-top: 5px;
	margin-left: 7px;
	height: 34px;
	max-width: 100%;
}

#topmenu li {
	display: inline;
	list-style-type: none;
	margin: 7px 0px;
	padding: 0px 0px;
	height: 34px;
	padding-right: 4px;
	padding-right: 4px;
}

This displays wonderfully on the desktop site but looks funky on mobile. I’m really quite new to mobile and my HTML/CSS knowledge is beginner. The links do not fit on the mobile screen and certainly don’t look as beautiful as the rest of the site.

Any advice on improving this HTML/CSS to make it look better on mobile would be appreciated.

2

I have bookmarked several helpful links on mobile navigation. See if any of these will help you:

General principles:
https://blogs.adobe.com/creativecloud/basic-patterns-of-mobile-navigation/

Code ideas:

3

You could look at the methods described in this topic:-

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.