Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
M
marvelous
Manage
Activity
Members
Labels
Plan
Wiki
Custom issue tracker
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Model registry
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
project
marvelous
Commits
aaf4140e
Commit
aaf4140e
authored
7 months ago
by
Tirupati Singh
Committed by
Rushikesh Raval
7 months ago
Browse files
Options
Downloads
Patches
Plain Diff
Issue
#3442029
: In mobile view, main menu and user account menu overlapped
parent
fd060eae
No related branches found
Branches containing commit
No related tags found
Tags containing commit
1 merge request
!35
Issue #3442029: Fixed the navigation menu design break issues for responsive devices.
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
assets/css/templatemo-onix-digital.css
+164
-40
164 additions, 40 deletions
assets/css/templatemo-onix-digital.css
assets/js/custom.js
+1
-1
1 addition, 1 deletion
assets/js/custom.js
css/color.css
+11
-4
11 additions, 4 deletions
css/color.css
with
176 additions
and
45 deletions
assets/css/templatemo-onix-digital.css
+
164
−
40
View file @
aaf4140e
...
...
@@ -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
:
8
0
px
;
.toolbar-horizontal.toolbar-fixed
.header-area
.header-sticky
{
top
:
7
8px
;
}
.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
:
50
px
;
top
:
39
px
;
}
}
@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
:
5
0px
;
top
:
4
0px
;
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
;
...
...
This diff is collapsed.
Click to expand it.
assets/js/custom.js
+
1
−
1
View file @
aaf4140e
...
...
@@ -97,7 +97,7 @@
$
(
"
.menu-trigger
"
).
on
(
'
click
'
,
function
()
{
$
(
this
).
toggleClass
(
'
active
'
);
$
(
'
.header-area .nav
'
).
slideToggle
(
200
);
$
(
'
.header-area .nav
'
).
toggleClass
(
'
nav-visible
'
);
}
);
}
...
...
This diff is collapsed.
Click to expand it.
css/color.css
+
11
−
4
View file @
aaf4140e
...
...
@@ -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
;
}
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment