How to create a semi-circle in center of a boostrap navbar for logo?
Question
I stuck on creating a semi circle inside the bootstrap navbar like this . I created a normal floated nav in bootstrap
<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-->
Here i am trying to replace <li class="scroll"><a href="#about" class="nav-semi">About</a></li> for logo appearance like this and i tried to apply this css but its not working properly.
//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;
}
Please Help for this problem!!
2 answers
solution1
0 ACCPTED 2017-01-28 08:21:32
Better you can do this stuff using photoshop or sketch.Create semicircled logo and place on the center of the navbar. Use this code
<!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Trinity School Vellore</title> <link rel="stylesheet" type="text/css" href="index.css" media="all"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body class=" yui3-skin-sam controls-visible guest-site signed-out public-page site homepage"> <div class="container-fluid" id="header"> <!-- Mobile Nav Begins --> <div class="row-fluid" id="header-bottom"> <div class="span12"> <ul aria-label="Site Pages" role="menubar"> <li class="" id="layout_11" role="presentation"> <a aria-labelledby="layout_11" href="#" role="menuitem"> <span>Admissions</span> </a> </li> <li class="" id="layout_12" role="presentation"> <a aria-labelledby="layout_12" href="#" role="menuitem"> <span>Academics</span> </a> </li> <li class="" id="layout_13" role="presentation"> <a aria-labelledby="layout_13" href="#" role="menuitem"> <span>News & Events</span> </a> </li> <li id="logo-nav"> <a class="logo" href="#"></a> </li> <li class="" id="layout_145" role="presentation"> <a aria-labelledby="layout_145" href="#" role="menuitem"> <span>Infrastructure</span> </a> </li> <li class="" id="layout_15" role="presentation"> <a aria-labelledby="layout_15" href="#" role="menuitem"> <span>Activities</span> </a> </li> <li class="" id="layout_16" role="presentation"> <a aria-labelledby="layout_16" href="#" role="menuitem"> <span>Contact us</span> </a> </li> </ul> </div> <!-- Mobile menu starts --> </div> </div> <!---HOMEPAGE BEGINS----> <div class="container-fluid"> <div class="portlet-layout row-fluid portlet-column portlet-column-only" id="featured-homepage"> <!-- Insert Featured Homepage Structures Here --> <div class="portlet-dropzone portlet-column-content portlet-column-content-only" id="layout-column_column-1"> <div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-journal-content " id="p_p_id_56_INSTANCE_npwnGKsZFqVt_"> <span id="p_56_INSTANCE_npwnGKsZFqVt"></span> <section class="portlet" id="portlet_56_INSTANCE_npwnGKsZFqVt"> <header class="portlet-topper"> <h1 class="portlet-title"> <span class=""> <img id="rjus_column1_0" src="spacer.png" alt="" style="background-image: url('_sprite.png'); background-position: 50% -496px; background-repeat: no-repeat; height: 16px; width: 16px;"> <span class="taglib-text hide-accessible">Web Content Display</span> </span> <span class="portlet-title-text">Web Content Display</span> </h1> <menu class="portlet-topper-toolbar" id="portlet-topper-toolbar_56_INSTANCE_npwnGKsZFqVt" type="toolbar"> </menu> </header> <div class="portlet-content"> <div class=" portlet-content-container" style=""> <div class="portlet-body"> <div class="journal-content-article"> <a href="https://prestonhs.org/welcome"> <div class="span4" id="featured-homepage-left" style="background: transparent url('http://placehold.it/660') no-repeat scroll center center / cover ; height: 660px;"> <div class="box"> <h2>Welcome to Trinity School!</h2> <p> </p> </div> </div> </a> <a href="https://prestonhs.org/about-preston"> <div class="span4" id="featured-homepage-middle" style="background: transparent url('http://placehold.it/660') no-repeat scroll center center / cover ; height: 660px;"> <div class="box"> <h2>About Trinity</h2> <p> </p> </div> </div> </a> <a href="https://prestonhs.org/why_preston"> <div class="span4" id="featured-homepage-right" style="background: transparent url('http://placehold.it/660') no-repeat scroll center center / cover ; height: 660px;"> <div class="box"> <h2>Why Choose Trinity School</h2> <p> </p> </div> </div> </a> </div> <div class="entry-links"> </div> </div> </div> </div> </section> </div> </div> </div> </div> </body> </html>
Happy Coding!!
solution2
0 2017-01-28 10:47:16
You need to create another ul for the logo and then set the border-radius accordingly. I guess this link would clear how to go about it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to create a JavaScript stacked, semi-circle gauge chart with customized line widths?
How to rotate a semi-circle made of points with javascript/jquery
How to make a Highcharts semi-circle donut chart using Hightchart-ng
How can I maintain the same distance between two points over the outer line of the semi-circle?
How to center logo in navbar when there's another element in the navbar also?
Semi-circle donut pie chart with labels (data names) and %-ages on the pie … and data numbers on mousehover
How to hide Boostrap Navbar with jQuery?
How to move a div in semi circle
How can I center a logo and place the links left and right on the navbar using bootstrap?
how to put logo in bootstrap navbar
Related Tags