0

I've problem with my menu. I would like add more styles to my last li element. I want to add some background-color. I tried to this with padding but look what happened. Everything is crash (logo and phone number too):

enter image description here

I also tried to do this with box-shadow but I've to change parameters on literally every breakpoints. Is there any universal solution to figure it out?

<div class="topbar">
            <div class="logo">
                <img src="img/logo.png" alt="Wapik" class="logo-image">
                <img src="img/phone.png" alt="Phone" class="phone">
                <span>+62 202 555 0117</span>
            </div>
            <div class="navbar-toggle">
                <i class="fas fa-bars"></i>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Get started</a></li>
                </ul>
            </nav>
        </div>

CSS

header {
        background: linear-gradient(rgba(45,110,112,.8), rgba(45,110,112,.8)), url('img/baner.png');
        background-size: cover;
        height: 75vh;
        position: relative;
    }

    .topbar {
        padding-top: 40px;
        display: flex;
        justify-content: space-between;
        color: #fff;
    }

    .logo {
        display: flex;
    }

    .logo span{
        padding-left: 5px;
    }

    .logo-image {
        border-right: 2px solid #4f6a6a;
        padding-right: 20px
    }

    .phone {
        padding-left: 20px;
    }

    nav ul {
        display: flex;
    }

    nav ul li:not(:last-of-type) {
        padding-right: 30px;
    }

    nav ul li:last-of-type {
        background-color: rgba(255,255,255,.3);
        padding: 10px 20px;
    }
Mariusz
  • 207
  • 1
  • 7
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Mar 30 '19 at 09:05
  • Possible duplicate of [How do I select the "last child" with a specific class name in CSS?](https://stackoverflow.com/questions/6401268/how-do-i-select-the-last-child-with-a-specific-class-name-in-css) – mx0 Mar 30 '19 at 09:11

1 Answers1

1

try adding 

box-sizing: border-box;

to your nav ul li. Otherwise I'd recommend setting a margin to you a elements instead of using a padding, or if you want more controll set the height of all ul>li to 100% and center the a in there with flexbox.

cubefox
  • 1,251
  • 14
  • 29