Menu bar not showing up in my blogger theme?

Question

The menu bar is not able to show up on my blogger site on any device idk why. My blog link is https://edifiess.blogspot.com/ I don't have much experience in web programming I had already read some of the answers but could not find the exact solution.

The code that is creating the error is attached here.

<div class='container menu-wrap'>
        <b:section class='menu' id='menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
          <b:widget id='LinkList210' locked='true' title='Menu' type='LinkList' version='1'>
            <b:widget-settings>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='text-1'>Flutter</b:widget-setting>
              <b:widget-setting name='link-1'>https://edifiess.blogspot.com/search/label/Flutter</b:widget-setting>
              <b:widget-setting name='text-0'>Home</b:widget-setting>
              <b:widget-setting name='link-0'>#</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
            <div class='widget-content'>
              <ul itemscope='' itemtype='http://schema.org/SiteNavigationElement'> 
                <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
                <b:loop values='data:links' var='link'>
                  <li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
                </b:loop>
              </ul>
            </div>
          </b:includable>
          </b:widget>
          <b:widget id='LinkList110' locked='false' title='Menu' type='LinkList' version='1'>
            <b:widget-settings>
              <b:widget-setting name='link-7'>#</b:widget-setting>
              <b:widget-setting name='link-5'>#</b:widget-setting>
              <b:widget-setting name='link-6'>#</b:widget-setting>
              <b:widget-setting name='link-3'>#</b:widget-setting>
              <b:widget-setting name='link-4'>#</b:widget-setting>
              <b:widget-setting name='text-1'>Feature</b:widget-setting>
              <b:widget-setting name='text-0'>Post Style</b:widget-setting>
              <b:widget-setting name='text-3'>_Mobile</b:widget-setting>
              <b:widget-setting name='text-2'>_Gadget</b:widget-setting>
              <b:widget-setting name='text-5'>Categories</b:widget-setting>
              <b:widget-setting name='text-4'>Pages</b:widget-setting>
              <b:widget-setting name='text-7'>Forum</b:widget-setting>
              <b:widget-setting name='text-6'>Buddypress</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-1'>#</b:widget-setting>
              <b:widget-setting name='link-2'>#</b:widget-setting>
              <b:widget-setting name='link-0'>#</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
          <div class='widget-content'>
            <ul id='nav' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
              <b:loop values='data:links' var='link'>
                <li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
              </b:loop>
           </ul> 
           <script type='text/javascript'> 
            //<![CDATA[
            $("#LinkList110").each(function(){var e="<ul id='nav'><li><ul id='sub-menu'>";$("#LinkList110 li").each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);"_"==n?(n=$(this).find("a").attr("href"),e+='<li><a href="'+n+'">'+r+"</a></li>"):(n=$(this).find("a").attr("href"),e+='</ul></li><li><a href="'+n+'">'+t+"</a><ul id='sub-menu'>")});e+="</ul></li></ul>";$(this).html(e);$("#LinkList110 ul").each(function(){var e=$(this);if(e.html().replace(/\s|&nbsp;/g,"").length==0)e.remove()});$("#LinkList110 li").each(function(){var e=$(this);if(e.html().replace(/\s|&nbsp;/g,"").length==0)e.remove()})});
            //]]>
            </script>
          </div>
        </b:includable>
          </b:widget>
        </b:section>

  </div>
      </div>

  </div>
  <div class='clear'/>

@media only screen and (max-width: 768px) {
.tm-menu {
text-align:center;
height:auto;
    }
#menu {
    display: block;
    float: none;
    height: auto;
}
.menu-wrap {
    margin: 0 auto;
    height: auto;
}
.top-bar-social {
    float: none;
    margin: 0 auto;
    }
.top-bar-social li {
    display: inline-block;
    float: none;
}
ul#nav {
    display: none;
}
.selectnav {
width: auto;
color: #222;
background: #f4f4f4;
border: 1px solid rgba(255,255,255,0.1);
position: relative;
border: 0;
padding: 6px 10px!important;
margin: 5px 0;
}
.selectnav {
display: block;
width: 100%;
max-width:200px;
}
.tm-menu .selectnav {
display:inline-block;
    margin: 10px 0;
}
.showpageArea {
    padding-top: 20px;
}
.post_item {
    margin-left: 0;
}
.search-bar {display: none;
}
.header_right {
height: 66px;    
overflow: hidden;
}

#top_menu span.nav_select {
top: 15px;    
}
div#topimg{width:460px ; height:auto}
.row .row{width:auto;max-width:none;min-width:0;margin:0 -10px}
.container{width:auto;max-width:500px;margin:0 auto;min-width:0}
#post_grids .column,#post_grids .columns{width:100%;float:none;padding:0 14px;margin-bottom:14px}
.column:last-child,.columns:last-child{float:none}
[class*="column"] + [class*="column"]:last-child{float:none}
.column:before,.columns:before,.column:after,.columns:after{content:"";display:table}
.column:after,.columns:after{clear:both}
.top_wrapper{margin-bottom:14px}

#header-wrapper .header_left,#header-wrapper .header_right{float:none;width:auto}
#header-wrapper .header_left{margin-bottom:30px}
#top_menu{position:relative;right:0}
#header{float:none;text-align:center;margin:0;margin-bottom:10px}
#header img{display:inline;margin:0 auto}
#top_menu{float:none;width:450px}
#top_menu .sf-menu,.header_search{display:none}
#top_menu span.nav_select,.select_menu{display:block}
#leftContent{width:auto;float:none;margin:0}
#leftContent .inner{margin:0}
.white_box .white_box_inner{padding:10px}
.post_item_inner,.post_single_inner{padding:14px}
.post_single{margin-bottom:14px}
.social_share,.post_author{display:none}
#related-posts ul li {
    width: 32.7%;
    height: 165px;
}
#footer{padding-top:14px}
#top_menu {
width: 94%;
}
.ops-404 {
    width: 70%;
}
#header img {
    padding: 35px 0px 0px 5px;
}
<b:if cond='data:blog.pageType != &quot;index&quot;'>
.post_item h1 {
       font-size: 32px;
    margin-bottom: 18px;

}
.post-share-buttons {
    margin-left: 0;  
}
.dummy-container, .google-plus-share-container {
    vertical-align: top;
    padding-left: 0;
}

If any further data is required let me know

Answer 1

Add this to your CSS

#menu .widget {
    display: inline-flex !important;
}