jquery - Menu below the logo -


i'd create menu similar this (try in mobile mode):

in "desktop" mode, want brand logo , other words on left, , menu on right. in "mobile" mode, block logo , other words, , below menu should take whole row.

any suggestion obtain result?

link jsfiddle

as can see defined css ids, have:

display:block 

one container of logo+words (on left) , 1 container of menu (on right).

it not work would, because not know how put menu below brand's name when in mobile mode.

i hope result looking for:

the css add

@media screen , (max-width: 768px) {   #logo {     display: inline-block;     float: none;     width:100%;     text-align:center;   }   #nav-logo {     display: inline-block;     float: none;     width:100%;     text-align:center;   }   .navbar-header button {     float:none;     margin:15px 0px;   } } 

jsfiddle example

if want menu above, invert html blocks id="nav-logo" , id="logo"... the updatade jsfiddle here.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -