Keep burger menu as the default on desktop & mobile

  • Posted in : Readme
  • EmilyMaginess
    Participant

    Hi there,

    I’d like to keep the navigation as clean and discreet as I can.

    Is it possible to have the burger menu applied on the desktop site, as well as mobile/tablet?

    Thanks,
    Emily

    ahmetsali
    Keymaster

    Hi, edit css/992.css in theme folder in a text editor and replace it’s content with this;

    
    /* DESKTOPS */
    @media screen and (min-width: 992px) {
    	
    	/* HEADER */
    	.site-header {
    		position: relative; z-index: 999;
    		}
    	.primary-navigation .nav-menu {
    		display: inline-block;
    		}
    	.social-toggle { 
    		display: none; 
    		}
    	.site-header .social { 
    		display: inline-block; float: right; position: static; width: auto; 
    		}
    	.site-header .social li { 
    		margin: 0 -1px 0 0;
    		}
    	.site-header .social li a { 
    		border-top: none;
    		}
        
        /* HEADER SOCIAL */
        .site-header .social li a { 
            background: transparent; 
        }
        
        /* HEADER SEARCH */
        .search-box #search-field {
            font-size: 42px !important;
        }
        
    	
    	
    	
    	
        /* SHARE BUTTON */
        .share.sharer-0 { 
            position: fixed; top: 90px; right: 30px; margin: 0; z-index: 999;
            }
    	.share.sharer-0 ul {
    		width: 310px !important;
    		}
        .share.sharer-0 div.social ul li {
            float: right; width: 50px; height: 50px; line-height: 50px;
            }
        div.share.sharer-0 .social.networks-5 {
            width: auto; 
            }
        
        /* MASONRY */
        .masonry .hentry { 
            width: 33%; 
            }
        .masonry .hentry.x2 { 
            width: 66%; 
            }
        .with-sidebar .masonry .hentry { 
            width: 50%; 
            }
        .with-sidebar .masonry .hentry.x2 { 
            width: 100%; 
            }
        
        /* INTRO */
        .intro h2 {
            font-size: 2em;
        }
    
        /* ROTATE WORDS */
        .rotate-words {
            min-height: 33px;
        }
    	
    	/* GALLERY SINGLE */
    	.rg-image-wrapper {
    		padding: 40px 60px;
    		}
    		
    }
    
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register