Skip to content
Snippets Groups Projects
Commit aaf4140e authored by Tirupati Singh's avatar Tirupati Singh Committed by Rushikesh Raval
Browse files

Issue #3442029: In mobile view, main menu and user account menu overlapped

parent fd060eae
No related branches found
No related tags found
1 merge request!35Issue #3442029: Fixed the navigation menu design break issues for responsive devices.
......@@ -394,9 +394,48 @@ header
transition: all .5s ease 0s;
}
.header-area .container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
@media screen and (min-width: 578px) and (max-width: 676px) {
.header-area .container > div {
margin-right: 25px;
}
}
@media screen and (max-width: 576px) {
.header-area .container {
justify-content: start;
column-gap: 70px;
}
}
@media screen and (max-width: 480px) {
.header-area .container {
justify-content: start;
column-gap: 15px;
}
}
@media screen and (max-width: 360px) {
.header-area.header-sticky {
height: auto !important;
}
.header-area .container {
flex-direction: column-reverse;
align-items: flex-start;
gap: 5px;
}
}
.header-area .main-nav #block-sitebranding a {
display: inline-block;
}
.header-area .main-nav #block-sitebranding img {
width: 80px;
height: auto;
}
.header-area .main-nav {
min-height: 80px;
/* background: transparent;*/
}
.header-area .main-nav .logo {
......@@ -422,8 +461,6 @@ header
} */
.header-area .main-nav .nav {
float: right;
margin-top: 20px;
margin-right: 0px;
background-color: transparent;
-webkit-transition: all 0.3s ease 0s;
......@@ -481,7 +518,7 @@ header
color: #2a2a2a;
}
.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li:hover > a,
.header-area .main-nav .nav li a.active {
color: #ff685f!important;
}
......@@ -568,19 +605,16 @@ header
.header-area .main-nav .menu-trigger {
cursor: pointer;
display: block;
position: absolute;
top: 33px;
width: 32px;
display: none;
top: 50%;
width: 35px;
height: 40px;
text-indent: -9999em;
z-index: 99;
right: 40px;
display: none;
}
.background-header .main-nav .menu-trigger {
top: 23px;
right: 0;
transform: translate(-50%, -50%);
margin-right: 10px;
}
.header-area .main-nav .menu-trigger span,
......@@ -685,28 +719,17 @@ header
min-height: 80px;
}
.header-area .nav {
margin-top: 30px;
}
.header-area.header-sticky .nav li a.active {
color: #ff685f;
}
.toolbar-tray-open.toolbar-horizontal.toolbar-fixed .header-sticky {
top: 80px;
.toolbar-horizontal.toolbar-fixed .header-area.header-sticky {
top: 78px;
}
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .header-sticky {
top: 40px;
}
.toolbar-horizontal.toolbar-fixed .header-sticky {
top: 80px;
body.toolbar-horizontal.toolbar-fixed:not(.toolbar-tray-open) .header-area.header-sticky {
top: 39px;
}
@media (max-width: 1200px) {
.header-area .main-nav .nav li {
padding-left: 12px;
padding-right: 12px;
}
.header-area .main-nav:before {
display: none;
}
......@@ -722,14 +745,11 @@ header
padding-right: 0px;
}
.toolbar-vertical .header-sticky {
top: 50px;
top: 39px;
}
}
@media (max-width: 767px) {
.background-header .main-nav .nav {
margin-top: 80px !important;
}
.header-area .main-nav .logo {
color: #1e1e1e;
}
......@@ -744,9 +764,7 @@ header
.header-area {
background-color: #f7f7f7;
padding: 0px 15px;
height: 100px;
box-shadow: none;
text-align: center;
}
.header-area .container {
padding: 0px;
......@@ -769,6 +787,8 @@ header
-o-transition: all 0s ease 0s;
transition: all 0s ease 0s;
margin-left: 0px;
opacity: 0;
visibility: hidden;
}
.background-header .nav {
margin-top: 80px;
......@@ -779,13 +799,12 @@ header
.header-area.header-sticky .nav {
margin-top: 0;
position: absolute;
top: 50px;
top: 40px;
left: 0;
right: 0;
background: red;
text-align: center;
}
.header-area .main-nav .nav li {
width: 100%;
background: #fff;
border-bottom: 1px solid #e7e7e7;
padding-left: 0px !important;
......@@ -796,7 +815,7 @@ header
line-height: 50px !important;
padding: 0px !important;
border: none !important;
background: #f7f7f7 !important;
background: #f7f7f7;
color: #191a20 !important;
}
.header-area .main-nav .nav li a:hover {
......@@ -835,6 +854,81 @@ header
.header-area .main-nav .nav li.submenu:focus ul {
height: 0px;
}
.header-area.header-sticky .nav.nav-visible {
display: block;
opacity: 1;
visibility: visible;
}
.header-area.header-sticky .nav.nav-visible > div {
width: 100%;
}
.header-area.header-sticky .nav.nav-visible > div .nav.nav-visible {
display: flex;
flex-direction: column;
justify-content: space-around;
background: #f7f7f7;
}
.main-nav nav li.menu-item.menu-item--expanded:hover>ul {
display: block;
opacity: 1;
visibility: visible;
width: 100% !important;
}
.main-nav nav ul.nav .menu-item.menu-item--expanded ul.nav .menu-item.menu-item--expanded > ul {
left: 0;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded::after {
content: none !important;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded {
background: #f7f7f7;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded:hover,
.main-nav nav ul.nav li.menu-item.menu-item--expanded:hover a {
background: #eee !important;
transition: none;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded a {
display: inline-block;
position: relative;
padding: 0 22px !important;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded > a::after {
position: absolute;
content: '\f0d7';
top: 50%;
right: 0;
width: 14px;
height: 15px;
margin-top: -18px;
padding-left: 5px;
padding-right: 8px;
color: #2a2a2a;
font-family: 'FontAwesome';
font-weight: 900;
transform: translate(-50%, -50%);
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded:hover > a::after {
color: #ff685f;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded .menu-item--expanded .menu-item--expanded .menu-item a,
.main-nav nav ul.nav li.menu-item.menu-item--expanded .menu-item--expanded .menu-item:hover a {
background: #eee !important;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded .menu-item--expanded .nav.nav-visible .menu-item a,
.main-nav nav ul.nav li.menu-item.menu-item--expanded .menu-item:hover a {
background: #f7f7f7 !important;
}
}
@media screen and (max-width: 640px) {
.toolbar-vertical .header-area.header-sticky.background-header {
top: 0;
}
}
@media screen and (max-width: 360px) {
.header-area.header-sticky .nav {
top: 72px;
}
}
/* @media (min-width: 767px) {
......@@ -2144,11 +2238,41 @@ responsive
#block-mainnavigation .menu-item--expanded li {
background-color: #eee;
padding: 5px;
width: max-content;
width: 100%;
}
#block-mainnavigation ul.nav li.menu-item.menu-item--expanded ul.nav {
background-color: #eee;
width: max-content;
box-shadow: 3px 2px 9px lightgray;
}
.main-nav nav ul.nav .menu-item.menu-item--expanded .nav .menu-item.menu-item--expanded > ul {
top: 0 !important;
left: 100%;
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded::after {
position: absolute;
content: '\f0d7';
top: 50%;
right: 0;
width: 14px;
height: 15px;
margin-top: -6px;
padding-left: 5px;
padding-right: 8px;
color: #2a2a2a;
font-family: 'FontAwesome';
font-weight: 900;
transform: translate(-50%, -50%);
}
.main-nav nav ul.nav li.menu-item.menu-item--expanded:hover::after {
color: #ff685f;
}
ul.nav .menu-item li.menu-item:hover,
ul.nav .menu-item li.menu-item:hover > a {
background: #f7f7f7 !important;
transition: none;
}
ul.nav .menu-item li.menu-item > a {
transition: none;
}
.site-article {
margin-bottom: 60px;
......
......@@ -97,7 +97,7 @@
$(".menu-trigger").on(
'click', function () {
$(this).toggleClass('active');
$('.header-area .nav').slideToggle(200);
$('.header-area .nav').toggleClass('nav-visible');
}
);
}
......
......@@ -64,16 +64,12 @@ a:active,
}
nav#block-useraccountmenu ul {
float: right;
background: #0d6efd;
padding: 2px;
border-radius: 13px;
margin: 4px;
display: flex;
}
nav#block-useraccountmenu ul:hover {
padding: 2px;
background: #a91818;
}
......@@ -84,3 +80,14 @@ nav#block-useraccountmenu ul li {
nav#block-useraccountmenu ul li a {
color: #ffffff;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
nav#block-useraccountmenu ul li {
width: max-content;
}
}
@media screen and (max-width: 360px) {
nav#block-useraccountmenu ul {
margin: 8px 0;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment