I am new to Vuejs and currently building a new website by Nuxtjs, built the navbar successfully but when opening it from a mobile it is not responsive at all.
i want to have something like this
but what I'm getting is this:
the code is as following:
.dropdown-menu {
text-decoration: none !important;
background-color: transparent;
background: transparent !important;
border-color: transparent !important;
}
.navbar {
text-decoration: none !important;
background-color: transparent !important;
background: transparent !important;
border-color: transparent !important;
}
.navbar-toggler{
border: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
float: right !important;
margin-left: 10rem !important;
}
.navbar-collapse{
margin-left: 285px !important;
}
.navbar-toggler-icon{
margin-left: 5rem !important;
}
.nav-item:hover:after{
border-top-color: 10px grey solid !important;
}
a:hover {
box-shadow: 0 -3px grey;
}
@media screen and (max-width: 992px) {
.navbar-collapse{
margin-left: -110px !important;
margin-top: 10px;
}
.navbar {
text-decoration: none !important;
background-color: transparent !important;
background: transparent !important;
border-color: transparent !important;
}
.navbar-toggler{
border: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
float: left !important;
/* margin-left: 10rem !important; */
}
} <b-navbar toggleable="lg" type="dark" variant="info" class="fusion-main-menmenu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-766 fusion-megamenu-menu">
<b-navbar-toggle target="nav-collapse" />
<div>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav
class="ml-auto"
>
<template
v-for="menu in menusDef['MAIN']['items']"
>
<!-- SINGLE ITEM -->
<b-nav-item
v-if="menu.children.length==0"
id="dropdown-1"
:key="menu.menu.menui_id"
:href="menu.menu.menui_url"
:target="menu.menu.menui_target"
class="
navbar
dropdown
menu-item
menu-item-type-custom
menu-item-object-custom
menu-item-
"
style=" text-decoration: none !important;
background-color: transparent !important;
background: transparent !important;
border-color: transparent !important;
"
>
{{ menu.menu.menui_title }}
</b-nav-item>
<!-- DROPDOWN -->
<b-nav-item-dropdown
v-if="menu.children.length>0"
:id="'dropdown-'+menu.menu.menui_id"
:key="menu.menu.menui_id"
:ref="'dropdown-'+menu.menu.menui_id"
text="Dropdown Button"
:href="menu.menu.menui_url"
:target="menu.menu.menui_target"
class="
navbar
dropdown
menu-item
menu-item-type-custom
menu-item-object-custom
menu-item-
"
style="
background-color: transparent;
border-color: transparent !important;"
no-caret
>
<template
#button-content
>
<span
class="menu-text"
>{{ menu.menu.menui_title }}</span>
</template>
<b-dropdown-item
v-for="cmenu in menu.children"
:id="'menu-item-'+cmenu.menu.menui_id"
:key="cmenu.menu.menui_id"
:href="cmenu.menu.menui_url"
no-caret
style="
background-color: transparent !important;
background: transparent !important;
border-color: transparent !important;"
>
<span class="" @click="scrollTo($event, cmenu.menu.menui_url)">{{ cmenu.menu.menui_title }}</span>
</b-dropdown-item>
</b-nav-item-dropdown>
</template>
</b-navbar-nav>
</b-collapse>
</div>
</b-navbar>
</div>
<b-navbar toggleable type="dark" variant="dark" style="display:none;">
<b-navbar-toggle target="navbar-toggle-collapse">
<b-navbar
toggleable="lg"
type="dark"
variant="dark"
aria-label="Main Menu"
style="overflow: visible"
>
<ul
v-if="menusDef['MAIN']!=undefined"
id="menu-mainnav"
class="fusion-menu"
>
<li
v-for="menu in menusDef['MAIN']['items']"
:id="'menu-item-'+menu.menu.menui_id"
:key="menu.menu.menui_id"
class="
menu-item
menu-item-type-custom
menu-item-object-custom
menu-item-
"
:data-item-id="menu.menu.menui_id"
>
<!-- <pre>{{ menu }}</pre> -->
<NuxtLink
v-if="menu.menu.menui_type=='Internal'"
:to="menu.menu.menui_url"
:target="menu.menu.menui_target"
class="fusion-bar-highlight"
>
<span class="menu-text">{{ menu.menu.menui_title }}</span>
</NuxtLink>
<a
v-if="menu.menu.menui_type=='External'"
:href="menu.menu.menui_url"
:target="menu.menu.menui_target"
class="fusion-bar-highlight menu-text"
><span class="menu-text">{{ menu.menu.menui_title }}</span>
</a>
<div
v-if="menu.children.length>0"
class="
fusion-megamenu-wrapper fusion-columns-2
columns-per-row-2 columns-2
col-span-4
"
>
<div v-if="menu.children.length<=6" class="row">
<div
class="fusion-megamenu-holder"
style="min-width: 140px"
>
<ul class="fusion-megamenu">
<li
id="menu-item-1167"
class="
menu-item
menu-item-type-custom
menu-item-object-custom
menu-item-has-children
fusion-megamenu-submenu
fusion-megamenu-submenu-notitle
fusion-megamenu-columns-1
col-lg-12 col-md-12 col-sm-12
"
style="width: 100%"
>
<ul class="sub-menu">
<li
v-for="cmenu in menu.children"
:id="'menu-item-'+cmenu.menu.menui_id"
:key="cmenu.menu.menui_id"
class="
menu-item
menu-item-type-custom
menu-item-object-custom
menu-item-822
"
:data-item-id="cmenu.menu.menui_id"
>
<NuxtLink
:to="cmenu.menu.menui_url"
class="fusion-bar-highlight"
>
<span class="" @click="scrollTo($event, cmenu.menu.menui_url)">{{ cmenu.menu.menui_title }}</span>
</NuxtLink>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div v-if="menu.children.length>6" class="row">
<div class="fusion-megamenu-holder" style="width: 315.109px;" data-width="315.12px">
<ul
class="fusion-megamenu
fusion-mobile-nav-item"
>
<li
id="menu-item-1014"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1014 fusion-megamenu-submenu fusion-megamenu-submenu-notitle fusion-megamenu-columns-2 col-lg-6 col-md-6 col-sm-6"
style="width:50%;"
>
<ul class="sub-menu">
<li
v-for="cmenu in JSON.parse(JSON.stringify(menu.children)).splice(0, Math.ceil(menu.children.length/2))"
:id="'menu-item-'+cmenu.menu.menui_id"
:key="cmenu.menu.menui_id"
class="
menu-item
menu-item-type-custom
menu-item-object-custom
menu-item-822
"
:data-item-id="cmenu.menu.menui_id"
>
<NuxtLink
:to="cmenu.menu.menui_url"
class="fusion-bar-highlight"
>
<span class="">{{ cmenu.menu.menui_title }}</span>
</NuxtLink>
</li>
</ul>
</li>
<li
id="menu-item-1015"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1015 fusion-megamenu-submenu fusion-megamenu-submenu-notitle fusion-megamenu-columns-2 col-lg-6 col-md-6 col-sm-6"
style="width:50%;"
>
<ul class="sub-menu">
<li
v-for="cmenu in JSON.parse(JSON.stringify(menu.children)).splice(Math.ceil(menu.children.length/2),menu.children.length)"
:id="'menu-item-'+cmenu.menu.menui_id"
:key="cmenu.menu.menui_id"
class="
menu-item
menu-item-type-custom
menu-item-object-custom
menu-item-822
"
:data-item-id="cmenu.menu.menui_id"
>
<NuxtLink
:to="cmenu.menu.menui_url"
class="fusion-bar-highlight"
>
<span class="">{{ cmenu.menu.menui_title }}</span>
</NuxtLink>
</li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;" />
</div>
</div>
</li>
</ul>
</b-navbar>
<div class="fusion-mobile-menu-icons" />
</b-navbar-toggle>
</b-navbar>please note that this is not the complete code since the project is huge, what I want is to have the dropdown menu on the left side while the toggle button on the right after open it from mobile
