- This topic has 5 replies, 2 voices, and was last updated 3 years, 11 months ago by
.
-
Posts
-
Hello,
I want to change the primary menu in a hamburger menu. Not only on small screens but also on desktop. Is this possible?Hello,
To change the primary menu into hamburger menu in the desktop as well, you have to add CSS following the path Admin Panel > Appearance > Customize > Additional CSS
#main-nav{ display: none; } @media only screen and (min-width: 901px){ #mobile-trigger i{ position: absolute; left: calc(50%); top: 20px; background-color: #e9c01e; border: 2px solid #fffffe; box-shadow: 0 1px 2px #001837; color: #ffffff; font-size: 21px; padding: 6px 8px; } } #mobile-trigger{ display: block; } @media only screen and (min-width: 1301px){ #mobile-trigger i{ top: 10px; } }Hope this helps.
If you have further queries, let us know.
Thank you.
Thank you very much, it works.
The only problem is that the homepage doesn’t show the ‘hamburger’.
Is it possible that other CSS causes this problem? Or do you have another solution?#main-nav{
display: none;
}@media only screen and (min-width: 901px){
#mobile-trigger i{
position: absolute;
left: calc(3%);
top: 20px;
background-color: #b1d076;
border: 2px solid #fffffe;
box-shadow: 0 1px 2px #001837;
color: #ffffff;
font-size: 21px;
padding: 6px 8px;
}
}#mobile-trigger{
display: block;
}@media only screen and (min-width: 1301px){
#mobile-trigger i{
top: 10px;
}
}@media only screen and (max-width: 1300px){
#main-slider .cycle-caption {
left: 45px;
max-width: 100%;
}
#main-slider .cycle-caption{
bottom:3%;
}
}#custom-header {
display: none;
}.main-navigation ul li > a:hover, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_item > a, .main-navigation ul li:hover > a { border-bottom: 2px solid #222222;
}
.main-navigation ul ul a {
border-top: 1px solid #ffffff;
}.custom-entry-date span.entry-day {
text-shadow: #9E5123 1px 1px, #9E5123 2px 2px, #9E5123 3px 3px, #9E5123 4px 4px, #9E5123 5px 5px, #9E5123 6px 6px, #9E5123 7px 7px, #9E5123 8px 8px, #9E5123 9px 9px, #9E5123 10px 10px, #9E5123 11px 11px, #9E5123 12px 12px, #9E5123 13px 13px, #9E5123 14px 14px, #9E5123 15px 15px, #9E5123 16px 16px, #9E5123 17px 17px, #9E5123 18px 18px, #9E5123 19px 19px, #9E5123 20px 20px, #9E5123 21px 21px, #9E5123 22px 22px, #9E5123 23px 23px, #9E5123 24px 24px, #9E5123 25px 25px, #9E5123 26px 26px, #9E5123 27px 27px, #9E5123 28px 28px, #9E5123 29px 29px, #9E5123 30px 30px, #9E5123 31px 31px, #9E5123 32px 32px, #9E5123 33px 33px, #9E5123 34px 34px, #9E5123 35px 35px, #9E5123 36px 36px, #9E5123 37px 37px, #9E5123 38px 38px, #9E5123 39px 39px, #9E5123 40px 40px, #9E5123 41px 41px, #9E5123 42px 42px, #9E5123 43px 43px, #9E5123 44px 44px, #9E5123 45px 45px, #9E5123 46px 46px, #9E5123 47px 47px, #9E5123 48px 48px, #9E5123 49px 49px, #9E5123 50px 50px, #9E5123 51px 51px, #9E5123 52px 52px, #9E5123 53px 53px, #9E5123 54px 54px, #9E5123 55px 55px, #9E5123 56px 56px, #9E5123 57px 57px, #9E5123 58px 58px;
}.post-navigation .nav-previous, .post-navigation .nav-next {
border-bottom: 4px solid #928e85;
}
- You must be logged in to reply to this topic.
