Ich blieb bei der Erstellung eines Halbkreises in der Bootstrap Navbar wie this. Ich habe einen normalen gefloatete nav in BootstrapWie erstellt man einen Halbkreis in der Mitte einer Boostrap-Navigationsleiste für das Logo?
<header id="header">
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="scroll active"><a href="#home">Home</a></li>
<li class="scroll"><a href="#features">Features</a></li>
<li class="scroll"><a href="#services">Services</a></li>
<li class="scroll"><a href="#portfolio">Portfolio</a></li>
<li class="scroll"><a href="#about">About</a></li>
<li class="scroll"><a href="#meet-team">Team</a></li>
<li class="scroll"><a href="#pricing">Pricing</a></li>
<li class="scroll"><a href="#blog">Blog</a></li>
<li class="scroll"><a href="#get-in-touch">Contact</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
Hier i <li class="scroll"><a href="#about" class="nav-semi">About</a></li>
für Logo Aussehen wie this zu ersetzen versuchen, und ich versuchte, diese CSS anwenden, aber es ist nicht richtig funktioniert.
//mycss
.nav-semi{
height: 220px;
width: 350px;
border-radius: 0px 0px 490px 490px;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background: #f2f2f2 url("http://semantic-ui.com/images/logo.png") no-repeat center;
}
Bitte Hilfe für dieses Problem!
Vielen Dank gute Idee! Code-Snippet, das Sie auf dem Codepen bereitgestellt haben, entspricht exakt meiner Anforderung ... –