grindarius/pro.html

## pro.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- * --------------- Navbar section --------------- -->
    <nav>
        <ul class="menu">
            <li class="logo">
                <a href="#">
                    MySite
                </a>
            </li>
            <li class="item">
                <a href="#">
                    Home
                </a>
            </li>
            <li class="item">
                <a href="#">
                    About
                </a>
            </li>
            <li class="item">
                <a href="#">
                    ประเภทอาหาร
                </a>
            </li>
            <li class="item">
                <a href="#">
                    อาหารประเทศ
                </a>
            </li>
            <li class="item">
                <a href="#">
                    ราคา
                </a>
            </li>
            <li class="item button">
                <a href="#">
                    log in
                </a>
            </li>
            <li class="item button secondary">
                <a href="#">
                    Sign Up
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <i class="fas fa-bars"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>

</html>

## style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f1f1f1;
}

nav {
    background: #222;
    padding: 5px 20px;
}

ul {
    list-style-type: none;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.logo a:hover {
    text-decoration: none;
}

.menu li {
    font-size: 16px;
    padding: 15px 5px;
    white-space: nowrap;
}

.logo a, .toggle a {
    font-size: 20px;
}

.button.secondary {
    border-bottom: 1px solid #444;
}

/* mobile settings */

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.toggle {
    order: 1;
}

.item .button {
    order: 2;
}

.item {
    width: 10px;
    text-align: center;
    order: 3;
    display: none;
}

.item.active {
    display: block;
}

/* tablet */

@media all and (min-width: 650px) {
    .menu {
        justify-content: center;
    }
    .logo {
        flex: 1;
    }
    .toggle {
        flex: 1;
        text-align: right;
    }
    .item.button {
        width: auto;
        order: 1;
        display: block;
    }
    .toggle {
        order: 1;
    }
    .button.secondary {
        border: 0;
    }
    .button a {
        padding: 7px 15px;
        background: teal;
        border: 1px solid #006d6d;
    }
    .button.secondary a {
        background: transparent;
    }
    .button a:hover {
        text-decoration: none;
    }
    .button:not(.secondary) a:hover {
        background: #006b6b;
        border-color: #005959;
    }
    .button .secondary a:hover {
        color: #ddd;
    }
}

/* desktop */

@media all and (min-width: 900px) {
    .item {
        display: block;
        width: auto;
    }
    .toggle {
        display: none;
    }
    .logo {
        order: 0;
    }
    .item {
        order: 1;
    }
    .button {
        order: 2;
    }
    .menu li {
        padding: 15px 10px;
    }
    .menu li.button {
        padding-right: 0;
    }
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<!-- * --------------- Navbar section --------------- -->
	<nav>
	<ul class="menu">
	<li class="logo">
	<a href="#">
	MySite
	</a>
	</li>
	<li class="item">
	<a href="#">
	Home
	</a>
	</li>
	<li class="item">
	<a href="#">
	About
	</a>
	</li>
	<li class="item">
	<a href="#">
	ประเภทอาหาร
	</a>
	</li>
	<li class="item">
	<a href="#">
	อาหารประเทศ
	</a>
	</li>
	<li class="item">
	<a href="#">
	ราคา
	</a>
	</li>
	<li class="item button">
	<a href="#">
	log in
	</a>
	</li>
	<li class="item button secondary">
	<a href="#">
	Sign Up
	</a>
	</li>
	<li class="item">
	<a href="#">
	<i class="fas fa-bars"></i>
	</a>
	</li>
	</ul>
	</nav>
	</body>

	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: Arial, Helvetica, sans-serif;
	background: #f1f1f1;
	}

	nav {
	background: #222;
	padding: 5px 20px;
	}

	ul {
	list-style-type: none;
	}

	a {
	color: white;
	text-decoration: none;
	}

	a:hover {
	text-decoration: underline;
	}

	.logo a:hover {
	text-decoration: none;
	}

	.menu li {
	font-size: 16px;
	padding: 15px 5px;
	white-space: nowrap;
	}

	.logo a, .toggle a {
	font-size: 20px;
	}

	.button.secondary {
	border-bottom: 1px solid #444;
	}

	/* mobile settings */

	.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	}

	.toggle {
	order: 1;
	}

	.item .button {
	order: 2;
	}

	.item {
	width: 10px;
	text-align: center;
	order: 3;
	display: none;
	}

	.item.active {
	display: block;
	}

	/* tablet */

	@media all and (min-width: 650px) {
	.menu {
	justify-content: center;
	}
	.logo {
	flex: 1;
	}
	.toggle {
	flex: 1;
	text-align: right;
	}
	.item.button {
	width: auto;
	order: 1;
	display: block;
	}
	.toggle {
	order: 1;
	}
	.button.secondary {
	border: 0;
	}
	.button a {
	padding: 7px 15px;
	background: teal;
	border: 1px solid #006d6d;
	}
	.button.secondary a {
	background: transparent;
	}
	.button a:hover {
	text-decoration: none;
	}
	.button:not(.secondary) a:hover {
	background: #006b6b;
	border-color: #005959;
	}
	.button .secondary a:hover {
	color: #ddd;
	}
	}

	/* desktop */

	@media all and (min-width: 900px) {
	.item {
	display: block;
	width: auto;
	}
	.toggle {
	display: none;
	}
	.logo {
	order: 0;
	}
	.item {
	order: 1;
	}
	.button {
	order: 2;
	}
	.menu li {
	padding: 15px 10px;
	}
	.menu li.button {
	padding-right: 0;
	}
	}