css - Making a custom navbar with Bootstrap -

-

i want make custom navbar shown in image mocked up. custom navbar

i've written far -

my html: 

<nav class="navbar navbar-default">         <div class="container">             <!-- brand , toggle grouped better mobile display -->             <div class="navbar-header">                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">                     <span class="sr-only">toggle navigation</span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </button>                 <a class="navbar-brand" href="#">brand</a>             </div>              <!-- collect nav links, forms, , other content toggling -->             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                  <ul class="nav navbar-nav navbar-right">                     <li><a href="#">home</a></li>                     <li><a href="#">about</a></li>                     <li><a href="#">events</a></li>                     <li><a href="#">contact</a></li>                     <li><a href="#">play video</a></li>                  </ul>             </div>             <!-- /.navbar-collapse -->         </div>         <!-- /.container -->     </nav>

my css: 

.navbar {     background: url(../images/pattern.png) repeat;     background-color: white; }  .navbar-brand, .navbar-nav li {     font-family: 'josefin sans';     font-size: 14px;     font-weight: 700;     line-height: 80px;     height: 80px;     padding-top: 0;     -webkit-font-smoothing: antialiased;     text-transform: uppercase;     letter-spacing: .1em;     color: #808080; }

this looks normal navbar should. don't know how position "play video" part , links(home, etc.) part separator in between them. ideas on how should proceed?

  • play video
    • add class li example

    <li class="play"><a href="#">play video</a></li>

    nex writee code

    .play::before {     color: gray;     content: "|";     float: left;     margin-right: 23px; }

    and put play icon/image in list item e.g

    <li class="play"><a href="#"><img src="play-icon.png"> play video</a></li> //place play icon path on play-icon.png place

    hope help. thanks


    Comments

    Post a Comment

    Popular posts from this blog

    sequelize.js - Sequelize group by with association includes id -

    -
    so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
    Read more

    java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -

    -
    when responding supplicant_state_changed_action broadcast , attempting send udp packet, exception: java.net.socketexception: sendto failed: eperm (operation not permitted) @ libcore.io.iobridge.maybethrowaftersendto(iobridge.java:542) @ libcore.io.iobridge.sendto(iobridge.java:511) @ java.net.plaindatagramsocketimpl.send(plaindatagramsocketimpl.java:184) @ java.net.datagramsocket.send(datagramsocket.java:305) @ com.mycompany.app.serviceclass.discover(serviceclass.java:355)at com.mycompany.app.serviceclass.access$600(serviceclass.java:39) @ com.mycompany.app.serviceclass$statemachine.run(serviceclass.java:242) @ java.lang.thread.run(thread.java:818) caused by: android.system.errnoexception: sendto failed: eperm (operation not permitted) @ libcore.io.posix.sendtobytes(native method) @ libcore.io.posix.sendto(posix.java:211) @ libcore.io.blockguardos.sendto(blockguardos.java:278) @ libcore.io.iobridge.sendto(iobridge.java:509) @ java.net.plaindat...
    Read more

    c++ - Migration from QScriptEngine to QJSEngine -

    -
    i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
    Read more