Menü Bar Text zentrieren

vegande

Hallo zusammen,

ich brauch Hilfe bei meinem Menü. Ich probiere jetzt schon ewig rum bekomm es aber einfach nicht hin, dass der Text mittig mit dem Logo in der Menü bar abschließt.
Kann mir bitte einer sagen was ich genau im CSS Code anpassen muss?

http://www.vegande.de

Vielen Dank

MrMurphy

Hallo

Ich verstehe dein Problem nicht. Soll der Text seichtlich zentriert werden oder in der Höhe?

Gruss

MrMurphy

vegande

Es soll in der Höhe zentriert werden, dass es mittig zum Logo liegt.

djheke

Eine von vielen Möglichkeiten

Code

<!DOCTYPE html
<head> 
<title>vertical</title> 
 
<style> 
header img , header nav {
 display:inline-block;
 vertical-align:middle;
}
</style> 


</head> 
<body> 
<header>


 <nav>
  <a href="#"><img src="logo.jpg" height="70"></a><!-- Home -->
  <a href="#">Vegan- Was ist das?</a>
 ....
</nav>
</header>
</body> 
</html>

Alles anzeigen

Wobei Flexbox eleganter wäre.

vegande

Ich glaube es ist wohl einfacher wenn ich den Code der bereits da is poste, wäre klasse wenn jemand sagen könnte was ich anpassen muss. Hab schon sämliche Variationenen durch aber nichts klappte bisher:

Code:

CSS

/****************************************//* Top Bar
/****************************************/








#top-bar {
    height:95px;
    background:#ffffff;
    width:100%;
    position:fixed;
    z-index:9999;
    -webkit-backface-visibility: hidden;
    opacity: 1.0;
    border-bottom: 1px solid #ececec;   
    -webkit-box-shadow: 1px 1px 1px 1px #ececec; 
    -moz-box-shadow: 1px 1px 1px 1px #ececec; 
    box-shadow: 1px 1px 1px 1px #ececec;




}
#top-bar .container2 {
    position:relative;
    height: 95px;
}




.menuOpacity2 {
    opacity: 0.9;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; 
    -moz-box-shadow:  0 1px 3px rgba(0, 0, 0, 0.2) !important; 
    box-shadow:  0 1px 3px rgba(0, 0, 0, 0.2) !important;
}




.menuOpacity2:hover {
    opacity: 1;
    transition: all 0.4s ease 0s;
}




/* Menu **********/
.slicknav_menu {
    display:none;
}








#nav-wrapper .menu {
    float:left;
}
#nav-wrapper .menu li {
    display:inline-block;
    margin-right:20px;
    position:relative;
    line-height: 57px;
}
#nav-wrapper .menu li a {
    color:#222;
    font-size:16px;
    font-weight:400;
    letter-spacing:1px;
    text-transform:uppercase;
    display:block;
    -o-transition:.25s;
    -ms-transition:.25s;
    -moz-transition:.25s;
    -webkit-transition:.25s;
    transition:.25s;
}
#nav-wrapper .menu li a:hover {
    color:#FF91A2;
}
#nav-wrapper .menu > li.menu-item-has-children > a:after {
    font-family: FontAwesome;
        content: "\f107";
    margin-left:7px;
    color:#222;
    font-size:13px;
}
#nav-wrapper .menu > li.menu-item-has-children > a:hover:after {
    color:#FF91A2;
}




    /* Dropdown **********/
    #nav-wrapper .menu .sub-menu,
    #nav-wrapper .menu .children {
        background-color: #fff;
        display: none;
        padding: 0;
        position: absolute;
        margin-top:0;
        left: 0;
        z-index: 99999;
        border-top: 3px solid #FF91A2;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        line-height: 50px;
    }

    #nav-wrapper ul.menu ul a,
    #nav-wrapper .menu ul ul a {
        color: #222;
        margin: 0;
        font-size:16px;
        letter-spacing:1px;
        line-height: 50px;
        padding: 0px 15px;
        min-width: 250px;
        -o-transition:.25s;
        -ms-transition:.25s;
        -moz-transition:.25s;
        -webkit-transition:.25s;
        transition:.25s;
        border-bottom:1px solid;
        border-color:#f2f2f2;
    }
    #nav-wrapper ul.menu ul li,
    #nav-wrapper .menu ul ul li {
        padding-right:0;
        margin-right:0;
        line-height: 50px;
    }




    #nav-wrapper ul.menu ul a:hover,
    #nav-wrapper .menu ul ul a:hover {
        color: #fff;
        background:#FF91A2;
    }




    #nav-wrapper ul.menu li:hover > ul,
    #nav-wrapper .menu ul li:hover > ul {
        display: block;
    }

    #nav-wrapper .menu .sub-menu ul,
    #nav-wrapper .menu .children ul {    
        left: 100%;
        top: 0;

    }

Alles anzeigen

djheke

Und wo ist dein HTML?

MrMurphy

Hallo

Er hat die Seite doch in seinem ersten Beitrag verlinkt.

Gruss

MrMurphy

djheke

Upps, übersehen.

#nav-wrapper .menu > li.menu-item-has-children > a:hover:after {
color:#FF91A2;
}

#nav-wrapper .menu li img {
display:inline-block;
vertical-align:middle
}

/* Dropdown **********/
#nav-wrapper .menu .sub-menu,
#nav-wrapper .menu .children {
background-color: #fff;
display: none;
padding: 0;
position: absolute;
margin-top:0;
left: 0;
z-index: 99999;
border-top: 3px solid #FF91A2;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
line-height: 50px;
}

Versuch mal das blau markierte bei dir einzufügen. Sollte funktionieren

Menü Bar Text zentrieren

Tags

Benutzer online in diesem Thema