Responsive dropdown menu
I have a navigation ul on the left side and logo in the middle and another ul in the right side like so :
Home Works Podcast Logo Journal About Contact
on hover there is a drop down menu on works and about, i wanna do two things now :
1 - on mobile version i want to change the navigation to menu icon like so
Logo Menu
2 - On menu click it should open the new menu for mobile but how to make the drop down work in mobile since there is no hover on mobile
and how to make the navigation be vertically since i have ul on the left and ul in right and logo in the middle this i want it be like so
Home
Works
Podcast
Journal
About
Contact
here is a code pen, and sorry i know i am asking for more :
https://codepen.io/anon/pen/jQzYye
javascript html css
add a comment |
I have a navigation ul on the left side and logo in the middle and another ul in the right side like so :
Home Works Podcast Logo Journal About Contact
on hover there is a drop down menu on works and about, i wanna do two things now :
1 - on mobile version i want to change the navigation to menu icon like so
Logo Menu
2 - On menu click it should open the new menu for mobile but how to make the drop down work in mobile since there is no hover on mobile
and how to make the navigation be vertically since i have ul on the left and ul in right and logo in the middle this i want it be like so
Home
Works
Podcast
Journal
About
Contact
here is a code pen, and sorry i know i am asking for more :
https://codepen.io/anon/pen/jQzYye
javascript html css
Mobile menu: jqueryscript.net/menu/… see the demo by sizing your browser window down small jqueryscript.net/demo/…
– Carol McKay
Nov 23 at 8:14
add a comment |
I have a navigation ul on the left side and logo in the middle and another ul in the right side like so :
Home Works Podcast Logo Journal About Contact
on hover there is a drop down menu on works and about, i wanna do two things now :
1 - on mobile version i want to change the navigation to menu icon like so
Logo Menu
2 - On menu click it should open the new menu for mobile but how to make the drop down work in mobile since there is no hover on mobile
and how to make the navigation be vertically since i have ul on the left and ul in right and logo in the middle this i want it be like so
Home
Works
Podcast
Journal
About
Contact
here is a code pen, and sorry i know i am asking for more :
https://codepen.io/anon/pen/jQzYye
javascript html css
I have a navigation ul on the left side and logo in the middle and another ul in the right side like so :
Home Works Podcast Logo Journal About Contact
on hover there is a drop down menu on works and about, i wanna do two things now :
1 - on mobile version i want to change the navigation to menu icon like so
Logo Menu
2 - On menu click it should open the new menu for mobile but how to make the drop down work in mobile since there is no hover on mobile
and how to make the navigation be vertically since i have ul on the left and ul in right and logo in the middle this i want it be like so
Home
Works
Podcast
Journal
About
Contact
here is a code pen, and sorry i know i am asking for more :
https://codepen.io/anon/pen/jQzYye
javascript html css
javascript html css
asked Nov 23 at 2:32
Taste of Leaving
717
717
Mobile menu: jqueryscript.net/menu/… see the demo by sizing your browser window down small jqueryscript.net/demo/…
– Carol McKay
Nov 23 at 8:14
add a comment |
Mobile menu: jqueryscript.net/menu/… see the demo by sizing your browser window down small jqueryscript.net/demo/…
– Carol McKay
Nov 23 at 8:14
Mobile menu: jqueryscript.net/menu/… see the demo by sizing your browser window down small jqueryscript.net/demo/…
– Carol McKay
Nov 23 at 8:14
Mobile menu: jqueryscript.net/menu/… see the demo by sizing your browser window down small jqueryscript.net/demo/…
– Carol McKay
Nov 23 at 8:14
add a comment |
1 Answer
1
active
oldest
votes
Here I am answering you logo / menu positioning and order on mobile and desktop using just one menu instead of two and putting the logo in as the first list item. Please see comments throughout the code.
html:
<header id="header">
<nav class="site-navigation">
<ul>
<!-- move logo into li at start of list, ditch the div: -->
<li class="logo"><h1>Humane</h1></li>
<li class="left-menu-item active"><a href="">Home</a></li>
<li class="left-menu-item"><a href="">Works</a>
<ul>
<li><a href="">Metro</a></li>
<li><a href="">Text</a></li>
<li><a href="">Columns</a></li>
<li><a href="">Full Width</a></li>
<li><a href="">Box</a></li>
</ul>
</li>
<li class="left-menu-item"><a href="">Podcast</a></li>
<li class="right-menu-item"><a href="">Journal</a></li>
<li class="right-menu-item"><a href="">About</a>
<ul>
<li><a href="">Agency</a></li>
<li><a href="">Freelancer</a></li>
</ul>
</li>
<li class="right-menu-item"><a href="">Contact</a></li>
</ul>
</nav>
</header>
css:
body {
max-width: 1600px;
margin: 0 auto;
}
#header {
padding: 120px 0;
}
.site-navigation ul {
list-style: none;
padding: 0;
}
.site-navigation ul li a {
color: #A3A3A3;
text-decoration: none;
display: block;
}
.site-navigation ul li a:hover {
font-weight: bold;
color: black;
}
.site-navigation ul li a::after {
content: '';
display: block;
width: 0;
height: 1px;
background: #39393B;
transition: width .3s;
}
.site-navigation ul li a:hover::after {
width: 100%;
transition: width .3s;
}
.site-navigation ul li ul {
position: absolute;
visibility: hidden; /* hides sub-menu */
opacity: 0;
z-index: -1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.site-navigation ul li ul li {
padding: 20px 0;
}
.site-navigation ul li:hover ul {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
}
.active {
border-bottom: 1px solid #39393B;
}
@media only screen and (max-width : 1019px) {
}
@media only screen and (min-width : 1020px) {
/* add ul so flex is on ul and move into desktop only media query */
.site-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* move into desktop only media query */
.site-navigation ul li {
display: inline-block;
}
/* move into desktop only media query */
.site-navigation ul li:not(:first-child) {
margin-left: 2em;
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.left-menu-item {
order:1; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.logo {
order:2; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.right-menu-item {
order:3; /* add this */
}
}
link: https://codepen.io/carolmckayau/pen/zMWWXX
Thank you so much for your time i really appreciate it, it works fine but the drop down overlapping on the main li but i will fix it, thank you for this again god bless
– Taste of Leaving
Nov 23 at 5:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439992%2fresponsive-dropdown-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here I am answering you logo / menu positioning and order on mobile and desktop using just one menu instead of two and putting the logo in as the first list item. Please see comments throughout the code.
html:
<header id="header">
<nav class="site-navigation">
<ul>
<!-- move logo into li at start of list, ditch the div: -->
<li class="logo"><h1>Humane</h1></li>
<li class="left-menu-item active"><a href="">Home</a></li>
<li class="left-menu-item"><a href="">Works</a>
<ul>
<li><a href="">Metro</a></li>
<li><a href="">Text</a></li>
<li><a href="">Columns</a></li>
<li><a href="">Full Width</a></li>
<li><a href="">Box</a></li>
</ul>
</li>
<li class="left-menu-item"><a href="">Podcast</a></li>
<li class="right-menu-item"><a href="">Journal</a></li>
<li class="right-menu-item"><a href="">About</a>
<ul>
<li><a href="">Agency</a></li>
<li><a href="">Freelancer</a></li>
</ul>
</li>
<li class="right-menu-item"><a href="">Contact</a></li>
</ul>
</nav>
</header>
css:
body {
max-width: 1600px;
margin: 0 auto;
}
#header {
padding: 120px 0;
}
.site-navigation ul {
list-style: none;
padding: 0;
}
.site-navigation ul li a {
color: #A3A3A3;
text-decoration: none;
display: block;
}
.site-navigation ul li a:hover {
font-weight: bold;
color: black;
}
.site-navigation ul li a::after {
content: '';
display: block;
width: 0;
height: 1px;
background: #39393B;
transition: width .3s;
}
.site-navigation ul li a:hover::after {
width: 100%;
transition: width .3s;
}
.site-navigation ul li ul {
position: absolute;
visibility: hidden; /* hides sub-menu */
opacity: 0;
z-index: -1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.site-navigation ul li ul li {
padding: 20px 0;
}
.site-navigation ul li:hover ul {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
}
.active {
border-bottom: 1px solid #39393B;
}
@media only screen and (max-width : 1019px) {
}
@media only screen and (min-width : 1020px) {
/* add ul so flex is on ul and move into desktop only media query */
.site-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* move into desktop only media query */
.site-navigation ul li {
display: inline-block;
}
/* move into desktop only media query */
.site-navigation ul li:not(:first-child) {
margin-left: 2em;
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.left-menu-item {
order:1; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.logo {
order:2; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.right-menu-item {
order:3; /* add this */
}
}
link: https://codepen.io/carolmckayau/pen/zMWWXX
Thank you so much for your time i really appreciate it, it works fine but the drop down overlapping on the main li but i will fix it, thank you for this again god bless
– Taste of Leaving
Nov 23 at 5:11
add a comment |
Here I am answering you logo / menu positioning and order on mobile and desktop using just one menu instead of two and putting the logo in as the first list item. Please see comments throughout the code.
html:
<header id="header">
<nav class="site-navigation">
<ul>
<!-- move logo into li at start of list, ditch the div: -->
<li class="logo"><h1>Humane</h1></li>
<li class="left-menu-item active"><a href="">Home</a></li>
<li class="left-menu-item"><a href="">Works</a>
<ul>
<li><a href="">Metro</a></li>
<li><a href="">Text</a></li>
<li><a href="">Columns</a></li>
<li><a href="">Full Width</a></li>
<li><a href="">Box</a></li>
</ul>
</li>
<li class="left-menu-item"><a href="">Podcast</a></li>
<li class="right-menu-item"><a href="">Journal</a></li>
<li class="right-menu-item"><a href="">About</a>
<ul>
<li><a href="">Agency</a></li>
<li><a href="">Freelancer</a></li>
</ul>
</li>
<li class="right-menu-item"><a href="">Contact</a></li>
</ul>
</nav>
</header>
css:
body {
max-width: 1600px;
margin: 0 auto;
}
#header {
padding: 120px 0;
}
.site-navigation ul {
list-style: none;
padding: 0;
}
.site-navigation ul li a {
color: #A3A3A3;
text-decoration: none;
display: block;
}
.site-navigation ul li a:hover {
font-weight: bold;
color: black;
}
.site-navigation ul li a::after {
content: '';
display: block;
width: 0;
height: 1px;
background: #39393B;
transition: width .3s;
}
.site-navigation ul li a:hover::after {
width: 100%;
transition: width .3s;
}
.site-navigation ul li ul {
position: absolute;
visibility: hidden; /* hides sub-menu */
opacity: 0;
z-index: -1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.site-navigation ul li ul li {
padding: 20px 0;
}
.site-navigation ul li:hover ul {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
}
.active {
border-bottom: 1px solid #39393B;
}
@media only screen and (max-width : 1019px) {
}
@media only screen and (min-width : 1020px) {
/* add ul so flex is on ul and move into desktop only media query */
.site-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* move into desktop only media query */
.site-navigation ul li {
display: inline-block;
}
/* move into desktop only media query */
.site-navigation ul li:not(:first-child) {
margin-left: 2em;
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.left-menu-item {
order:1; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.logo {
order:2; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.right-menu-item {
order:3; /* add this */
}
}
link: https://codepen.io/carolmckayau/pen/zMWWXX
Thank you so much for your time i really appreciate it, it works fine but the drop down overlapping on the main li but i will fix it, thank you for this again god bless
– Taste of Leaving
Nov 23 at 5:11
add a comment |
Here I am answering you logo / menu positioning and order on mobile and desktop using just one menu instead of two and putting the logo in as the first list item. Please see comments throughout the code.
html:
<header id="header">
<nav class="site-navigation">
<ul>
<!-- move logo into li at start of list, ditch the div: -->
<li class="logo"><h1>Humane</h1></li>
<li class="left-menu-item active"><a href="">Home</a></li>
<li class="left-menu-item"><a href="">Works</a>
<ul>
<li><a href="">Metro</a></li>
<li><a href="">Text</a></li>
<li><a href="">Columns</a></li>
<li><a href="">Full Width</a></li>
<li><a href="">Box</a></li>
</ul>
</li>
<li class="left-menu-item"><a href="">Podcast</a></li>
<li class="right-menu-item"><a href="">Journal</a></li>
<li class="right-menu-item"><a href="">About</a>
<ul>
<li><a href="">Agency</a></li>
<li><a href="">Freelancer</a></li>
</ul>
</li>
<li class="right-menu-item"><a href="">Contact</a></li>
</ul>
</nav>
</header>
css:
body {
max-width: 1600px;
margin: 0 auto;
}
#header {
padding: 120px 0;
}
.site-navigation ul {
list-style: none;
padding: 0;
}
.site-navigation ul li a {
color: #A3A3A3;
text-decoration: none;
display: block;
}
.site-navigation ul li a:hover {
font-weight: bold;
color: black;
}
.site-navigation ul li a::after {
content: '';
display: block;
width: 0;
height: 1px;
background: #39393B;
transition: width .3s;
}
.site-navigation ul li a:hover::after {
width: 100%;
transition: width .3s;
}
.site-navigation ul li ul {
position: absolute;
visibility: hidden; /* hides sub-menu */
opacity: 0;
z-index: -1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.site-navigation ul li ul li {
padding: 20px 0;
}
.site-navigation ul li:hover ul {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
}
.active {
border-bottom: 1px solid #39393B;
}
@media only screen and (max-width : 1019px) {
}
@media only screen and (min-width : 1020px) {
/* add ul so flex is on ul and move into desktop only media query */
.site-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* move into desktop only media query */
.site-navigation ul li {
display: inline-block;
}
/* move into desktop only media query */
.site-navigation ul li:not(:first-child) {
margin-left: 2em;
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.left-menu-item {
order:1; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.logo {
order:2; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.right-menu-item {
order:3; /* add this */
}
}
link: https://codepen.io/carolmckayau/pen/zMWWXX
Here I am answering you logo / menu positioning and order on mobile and desktop using just one menu instead of two and putting the logo in as the first list item. Please see comments throughout the code.
html:
<header id="header">
<nav class="site-navigation">
<ul>
<!-- move logo into li at start of list, ditch the div: -->
<li class="logo"><h1>Humane</h1></li>
<li class="left-menu-item active"><a href="">Home</a></li>
<li class="left-menu-item"><a href="">Works</a>
<ul>
<li><a href="">Metro</a></li>
<li><a href="">Text</a></li>
<li><a href="">Columns</a></li>
<li><a href="">Full Width</a></li>
<li><a href="">Box</a></li>
</ul>
</li>
<li class="left-menu-item"><a href="">Podcast</a></li>
<li class="right-menu-item"><a href="">Journal</a></li>
<li class="right-menu-item"><a href="">About</a>
<ul>
<li><a href="">Agency</a></li>
<li><a href="">Freelancer</a></li>
</ul>
</li>
<li class="right-menu-item"><a href="">Contact</a></li>
</ul>
</nav>
</header>
css:
body {
max-width: 1600px;
margin: 0 auto;
}
#header {
padding: 120px 0;
}
.site-navigation ul {
list-style: none;
padding: 0;
}
.site-navigation ul li a {
color: #A3A3A3;
text-decoration: none;
display: block;
}
.site-navigation ul li a:hover {
font-weight: bold;
color: black;
}
.site-navigation ul li a::after {
content: '';
display: block;
width: 0;
height: 1px;
background: #39393B;
transition: width .3s;
}
.site-navigation ul li a:hover::after {
width: 100%;
transition: width .3s;
}
.site-navigation ul li ul {
position: absolute;
visibility: hidden; /* hides sub-menu */
opacity: 0;
z-index: -1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.site-navigation ul li ul li {
padding: 20px 0;
}
.site-navigation ul li:hover ul {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
}
.active {
border-bottom: 1px solid #39393B;
}
@media only screen and (max-width : 1019px) {
}
@media only screen and (min-width : 1020px) {
/* add ul so flex is on ul and move into desktop only media query */
.site-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* move into desktop only media query */
.site-navigation ul li {
display: inline-block;
}
/* move into desktop only media query */
.site-navigation ul li:not(:first-child) {
margin-left: 2em;
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.left-menu-item {
order:1; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.logo {
order:2; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.right-menu-item {
order:3; /* add this */
}
}
link: https://codepen.io/carolmckayau/pen/zMWWXX
answered Nov 23 at 3:34
Carol McKay
1,9011711
1,9011711
Thank you so much for your time i really appreciate it, it works fine but the drop down overlapping on the main li but i will fix it, thank you for this again god bless
– Taste of Leaving
Nov 23 at 5:11
add a comment |
Thank you so much for your time i really appreciate it, it works fine but the drop down overlapping on the main li but i will fix it, thank you for this again god bless
– Taste of Leaving
Nov 23 at 5:11
Thank you so much for your time i really appreciate it, it works fine but the drop down overlapping on the main li but i will fix it, thank you for this again god bless
– Taste of Leaving
Nov 23 at 5:11
Thank you so much for your time i really appreciate it, it works fine but the drop down overlapping on the main li but i will fix it, thank you for this again god bless
– Taste of Leaving
Nov 23 at 5:11
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439992%2fresponsive-dropdown-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Mobile menu: jqueryscript.net/menu/… see the demo by sizing your browser window down small jqueryscript.net/demo/…
– Carol McKay
Nov 23 at 8:14