<header>
    <ul>
        <li><a href="#">element menu 1</a></li>
        <li><a href="#">element menu 2</a></li>
        <li><a href="#">element menu 3</a></li>
        <li><a href="#">element menu 4</a></li>
    </ul>
</header>

header {
	align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: 2rem;
}

header ul {
	border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-left: 1rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.25s ease-in-out 0s;
}

header ul li a {
	color: var(--secondary-color);
    text-decoration: none;
}

@media (min-width: 905px) {
	header {
        justify-content: space-between;
	}
    header ul   {
    	display: block;
	}
}

<div class="logo"><i class="fas fa-utensils"></i> Lorem ipsum</div>

header.logo {
	animation: mylogo 2s infinite;
    color: var(--secondary-color);
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 0.25rem 0.5rem;
}

@keyframes mylogo {
	0% {
        color: var(--secondary-color);
	}
    50% {
    	color: #fff;
	}
}

<div class="wrapper">
	<header>
        <div class="logo"><i class="fas fa-utensils"></i> Lorem ipsum</div>
	    <ul>
    	    <li><a href="#element menu 1">element menu 1</a></li>
    	    <li><a href="#element menu 2">element menu 2</a></li>
        	<li><a href="#element menu 3">element menu 3</a></li>
        	<li><a href="#element menu 4">element menu 4</a></li>
    	</ul>
	</header>
</div>

<section class="mobile-section">
	<button><i class="fas fa-bars"></i></button>
    <ul class="menu">
    	<li><a href="#element menu 1">element menu 1</a></li>
    	<li><a href="#element menu 2">element menu 2</a></li>
        <li><a href="#element menu 3">element menu 3</a></li>
            <li><a href="#element menu 4">element menu 4</a></li>
	</ul>
</section>

.mobile-section {
	postion: absolute;
    top: 1rem;
    left: 1rem;
}

.mobile-section button {
	background-color: transparent;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 2.25rem;
    padding: 0.5rem 1.25rem;
    transition: all 0.25s ease-in-out 0s;
}
.mobile-section ul {
	background-color: #fff;
    display: none;
    list-style: none;
}
.mobile-section ul li {
    padding: 0.75rem 1rem;
}
.mobile-section ul a {
	text-decoration: none;
    color: var(--secondary-color);
}
.mobile-section:hover button {
    background-color: var(--secondary-color);
}
.mobile-section:hover ul {
    display: block;
    border: 1px solid darkblue;
    width: 20rem;
    border-radius: 6px;
}

<form>

<input>

<label>

<label for="userName">
	<i class="fa fa-lg fa fw fa-user></i>
</label>
<input name="name" id="userName" type="text" placeholder="Podaj swoje imie">

<label for="country">
	<i class="fas fa-city"></i>
</label>
<select id="country" name="city">
	<option value="wroclaw">Wrocław</option>
    <option value="warszawa">Warszawa</option>
    <option value="krakow">Kraków</option>
    <option value="other">Inna lokalizacja</option>
</select>

cacheDom: function() {
	//MAIN PARENT ELEMENT
    this.contactForm = document.getElementById("contactForm");
    //MAIN FORM ELEMENTS
    this.formHeader = document.querySelector("#formHeader h2");
    this.formBody = document.getElementById("formBody");
    this.inputContainer = document.getElementsByClassName("inputContainer"):
    //USER INPUT ELEMENTS
    //INPUT FIELDS
    this.fields = {
    	userName: document.getElementById("userName"),
        userEmail: document.getElementById("userEmail"),
        userMessage: document.getElementById("userMessage")
    };
    this.submitBtn = document.getElementById("submitBtn");

preventDefault: function(evnt) {
	//PREVENT DEFUALT
    evnt.preventDefault();
},

checkFields: function() {
	var i,
    	validCount = 0,
        //EMAIL FILTER
        filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    //CYLCE THROUGH INPUTS
    for (i in this.fields) {
    	if (this.fields.hasOwnProperty(i)) {
        	input = this.fields[i];
            //CHECK IF FIELD IS EMPTY
            if (input.value === "") {
            	//ADD ERROR CLASS
                this.addClass(input, classError);
                //CHECK IF EMAIL IS VALID
   			} else if (i === "userEmail" && !filter.test(input.value)) {
            	//ADD ERROR CLASS
                this.addClass(input, classError);
        	} else {
            	//FIELD IS VALID
                this.addClass(input, classSuccess);
                validCount +=1;
        	}
		}
	}

errorMessage: function(input) {
	var message;
    //IF USERNAME HAS ERROR
    if (input === this.fields.userName) {
    	message = "Proszę podaj swoje imię";
        //ELSE IF USEREMAIL HAS ERROR
	} else if (input === this.fields.userEmail) {
    	message = "Proszę podaj swój email";
        //ELSE IF USERMESSAGE HAS ERROR
    } else if (input === this.fields.userMessage) {
    	message = "Proszę napisz wiadomość";
    }
    this.renderError(input, message);
},

renderError: function(input, message) {
	var html;
    //GET INPUT CONTAINER
    container = input.parentElement;
    //RENDER HTML
    html = document.createElement("div");
    html.setAttribute("class", "message");
    html.innerHTML = message;
    //IF MESSAGE ELEMENT DOESN'T EXIST
    if (!container.getElementsByClassName("message")[0]) {
    	//INSERT MESSAGE TO INPUT CONTAINER
        container.insertBefore(html, container.firstElementChild);
    }
},

//CSS CLASSES
classSuccess = "success",
classError = "error",

addClass: function(input, clss) {
	container = input.parentElement;
    //IF INPUT HAS ERROR
    if (clss === classError) {
    	//SHOW ERROR MESSAGE
        this.errorMessage(input);
    }
    //ADD CLASS
    input.parentElement.classList.add(clss);
},

resetClassList: function(input) {
	var i;
    //IF TARGETING SPECIFIC INPUT
    if (input) {
    	//GET INPUT CONTAINER
        container = input.parentElement;
        //REMOVE CLASSES
        container.classList.remove(classError, classSuccess);
        //FOCUS ON INPUT FIELD
        input.focus();
	} else {
    	for (i in this.fields) {
        	if (this.fields.hasOwnProperty(i)) {
            	//REMOVE CLASSES FROM ALL FIELDS
                this.fields[i].parentElement.classList.remove(classError, classSuccess);
            }
        }
	}
},
resetErrors: function(input) {
	//GET INPUT CONTAINER
    container = input.parentElement;
    //IF CONTAINER CONTAINS ERROR
    if (container.classList.contains(classError)) {
    	//RESET CLASSES
        this.resetClassList(input);
    }
},

submitForm: function() {
	var waitForAnimation;
    //ADD SUCCESS CLASS
    this.contactForm.classList.add(classSuccess);
    //WAIT FOR ANIMATION TO FINISH
    this.changeHeader("Wysłano wiadomość");
    //WAIT FOR ANIMATION TO FINISH
    setTimeout(this.changeHeader.bin(this, "Dziękuję"),1200);
},
changeHeader: function(text) {
	//CHANGE HEADER TEXT
    this.formHeader.innerHTML = text;
}

//INITIATE FORM VALIDATOR
formValidator.init();