I'm currently working on creating a responsive navigation bar, and I want to add an element to the right side of the nav. Here's an example of what I'm aiming for.
I tried using float:right, but it didn't work as expected. Then, I attempted to use margin-left, but that approach hindered responsiveness. The element with float left is an li element. Here is the HTML code I am working with:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8>"
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Responsive Menu</title>
</head>
<body>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
...
</ul>
</div>
In my attempt to troubleshoot this issue, I examined the CSS styling and found that the .languages class is at the end. Even after trying to use an ID selector, like so:
The CSS code snippet in question looks like this:
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
...
#languages{
float: right;
}