Hello,
Is it possible configure top menu in Rio layout to work the same way in Modena layout?
I would like itens being opened below the icons instead of between.
Regards,
Mauricio
Top Menu
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try with;
Code: Select all
<style type="text/css">
/* top menu */
#top-menu > li > ul > li {
padding-left: 20px !important;
}
#top-menu > li > a.active-menu {
background-color: rgba(255, 255, 255, 0.1);
}
#top-menu li ul {
width: 150px !important;
height: 0px;
padding: 0px;
margin: 0px;
overflow: hidden;
position: absolute;
background-color: #ffffff;
border-radius: 2px;
margin: 65px 0px 0px -100px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(43, 59, 93, 0.6);
-moz-box-shadow: 0px 1px 4px 0px rgba(43, 59, 93, 0.6);
box-shadow: 0px 1px 4px 0px rgba(43, 59, 93, 0.6);
-webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#top-menu li ul.active-menu {
height: auto;
margin: 65px 0px 0px -100px;
padding-bottom: 10px !important;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#top-menu li ul li input[type="text"] {
color: #546e7a;
font-family: 'roboto_condensedregular';
}
#top-menu li ul li a {
color: #546e7a;
display: block;
border-bottom: none;
font-family: 'roboto_condensedregular';
}
#top-menu li ul li a.active-menu,
#top-menu li ul li a:hover,
#top-menu li ul li a:focus {
background-color: #f5f5f5;
}
</style>
Github Profile: https://github.com/mertsincan
Thanks!
It worked great on desktop browser. However, it looked weird in small devices.
Is it possible apply this change only to desktop browsers? I tried to put it between:
But it didn't work as expected.
Regards,
Mauricio
It worked great on desktop browser. However, it looked weird in small devices.
Is it possible apply this change only to desktop browsers? I tried to put it between:
Code: Select all
@media (min-width: 640px) and (max-width: 960px) {}
But it didn't work as expected.
Regards,
Mauricio
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try with;
We use these media queries in Layouts;
Also, I think you should add this Js code to close the open menuitems on Topbar;
Code: Select all
@media (min-width: 961px){}
Code: Select all
/* Large desktop */
@media (min-width: 961px){
}
@media (min-width: 961px) and (max-width:1200px){
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px){
}
/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {
}
/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
}
Code: Select all
....
bindEvents: function() {
...
this.topMenu.find('li').clickOff(function() {
$this.topMenu.find('.active-menu').removeClass('active-menu');
});
},
...
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for the comments
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest