Menu cały czas w tej samej linij.

pytanie zadane 24 marca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)
zamknięte 24 marca 2017 przez Vorex444

Cześć mam pytanie co muszę zrobić aby moje menu cały czas do momentu aż się zderzy z "logo" dopiero wtedy przeszło linie niżej?

tak wygląda normalnie

a gdy odrobine pomniejsze mimo że jeszcze menu nie dotyka logo to przechodzi do kolejnej linij

Tutaj przykład daje jak bym chciał żeby menu się zachowywało:

https://jonny.me/

wiem o tym ze rwd zamienia menu w hamurgera jak juz menu dotknie praktycznie logo, ale jak zrobić to ze gdy powoli pomniejszam rozmiar przeglądarki to te menu się przesuwa.

Mój kod css wygląda tak:

*{box-sizing: border-box;}

body
{
    margin: 0;
    padding: 0;
}

/*własna czcionka */
@font-face {
   font-family: menuczcionka;
   src: url(agencyfb.otf);
}

header
{
background: url(img/headertlo.png) center/cover no-repeat;
background-attachment: fixed;
height: 100vh;
}

.logo
{
    color:#ffffff;
    padding-top: 35px;
    font-family: 'Josefin Sans', sans-serif;
    margin-left: 120px;
    float: left;
}

header ul
{
    list-style: none;
    display: inline-flex;
    padding-top: 35px;
    margin-left: 300px;
}

header ul li a
{
    text-decoration: none;
    color:#ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
}

.home
{
    padding: 40px;
}

.home:hover
{
    color:#d84a4a;
}

.about
{
    padding: 40px;
}

.contact
{
     padding: 40px;
}

a html tak:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width-device-width, 
                               initial-scale-1.0">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
    
<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
</head>
<body>
<header>   
    
    <div class="logo"><font size="5px">WOJCIECH HOREMBAŁA</font> </br> 
    WEB DESIGNER & DEVELOPER</div> 
  
    <ul>
    <li><a href="" class="home">HOME</a></li>
    <li><a href="" class="about">ABOUT</a></li>
    <li><a href="" class="contact">CONTACT</a></li>
    </ul>
        
    
    

</header>














    
    
    
</body>
</html>

DZIEKI ZA WSZYSTKIE ODPOWIEDZI :)

komentarz zamknięcia: Problem rozwiazany.

2 odpowiedzi

odpowiedź 24 marca 2017 przez xandros Nałogowiec (29,450 p.)
wybrane 24 marca 2017 przez Vorex444

Najlepsza

https://jsfiddle.net/x8arrzgg/1/

komentarz 24 marca 2017 przez Vorex444 Dyskutant (9,610 p.)

ale to nic nie dało, jak dodam znowu do nav margin left 300px; to nadal sie znizna do kolejnej lini mimo ze nie dotyka logo,

komentarz 24 marca 2017 przez xandros Nałogowiec (29,450 p.)

Po uj ci margin left 300px?!

komentarz 24 marca 2017 przez xandros Nałogowiec (29,450 p.)

Masz ze swoim margin 300 https://jsfiddle.net/x8arrzgg/2/

komentarz 24 marca 2017 przez Vorex444 Dyskutant (9,610 p.)

chce zeby te menu było trochę odsunięte od logo a nie stykało się

komentarz 24 marca 2017 przez Vorex444 Dyskutant (9,610 p.)

ale nadal jest to o co mi chodzi cały czas, czyli jak się troszke pomniejszy rozmiar przeghladrki to menu schodzi nizej, a chce zeby po pomniejszczeiu az do czasu poki nie dotknie logo nie zeszło na dół