Skip to content

Commit a6d9e56

Browse files
giucu91giucu91
committed
1 parent a365467 commit a6d9e56

File tree

4 files changed

+160
-4
lines changed

4 files changed

+160
-4
lines changed

‎assets/js/shapely-scripts.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
jQuery( '.shapely-dropdown' ).click( function( evt ) {
1010
evt.preventDefault();
1111
jQuery( this ).parent().find( '> ul' ).toggleClass( 'active' );
12+
jQuery( window ).trigger( 'resize' ).trigger( 'scroll' );
1213
});
1314

1415
// Smooth scroll to inner links
@@ -108,10 +109,12 @@
108109
$( '.nav-bar' ).toggleClass( 'nav-open' );
109110
$( this ).toggleClass( 'active' );
110111
$( '.search-widget-handle' ).toggleClass( 'hidden-xs hidden-sm' );
112+
jQuery( window ).trigger( 'resize' ).trigger( 'scroll' );
111113
});
112114

113115
$( '.module.widget-handle' ).click(function() {
114116
$( this ).toggleClass( 'toggle-search' );
117+
jQuery( window ).trigger( 'resize' ).trigger( 'scroll' );
115118
});
116119

117120
$( '.search-widget-handle .search-form input' ).click(function( e ) {

‎header.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<div id="page" class="site">
2525
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'shapely' ); ?></a>
2626

27-
<header id="masthead" class="site-header" role="banner">
27+
<header id="masthead" class="site-header<?php echo get_theme_mod( 'mobile_menu_on_desktop', false ) ? ' mobile-menu' : '' ?>" role="banner">
2828
<div class="nav-container">
2929
<nav id="site-navigation" class="main-navigation" role="navigation">
3030
<div class="container nav-bar">

‎inc/customizer.php‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,8 +275,24 @@ function shapely_customizer( $wp_customize ) {
275275
'section' => 'shapely_blog_section',
276276
) );
277277

278-
279-
278+
$wp_customize->add_setting( 'mobile_menu_on_desktop', array(
279+
'default' => 0,
280+
'sanitize_callback' => 'shapely_sanitize_checkbox',
281+
) );
282+
if ( class_exists( 'Epsilon_Control_Toggle' ) ) {
283+
$wp_customize->add_control( new Epsilon_Control_Toggle( $wp_customize, 'mobile_menu_on_desktop', array(
284+
'label' => esc_html__( 'Mobile Menu on Desktop', 'shapely' ),
285+
'description' => esc_html__( 'Always the menu will be like the mobile menu', 'shapely' ),
286+
'section' => 'shapely_main_section',
287+
) ) );
288+
} else {
289+
$wp_customize->add_control( 'mobile_menu_on_desktop', array(
290+
'label' => esc_html__( 'Mobile Menu on Desktop', 'shapely' ),
291+
'description' => esc_html__( 'Always the menu will be like the mobile menu', 'shapely' ),
292+
'section' => 'shapely_main_section',
293+
'type' => 'checkbox',
294+
) );
295+
}
280296
$wp_customize->add_setting( 'footer_callout_text', array(
281297
'default' => '',
282298
'sanitize_callback' => 'wp_kses_stripslashes',

‎style.css‎

Lines changed: 138 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1830,6 +1830,143 @@ nav.fixed.scrolled {
18301830
}
18311831
}
18321832

1833+
/* Mobile Menu on Desktop */
1834+
@media all and (min-width: 992px) {
1835+
.mobile-menu .module.widget-handle {
1836+
border-left: none;
1837+
line-height: 40px;
1838+
min-height: 40px;
1839+
}
1840+
.mobile-menu .nav-bar .module-group {
1841+
width: 100%;
1842+
}
1843+
.mobile-menu .visible-xs,
1844+
.mobile-menu .visible-sm,
1845+
.mobile-menu .nav-open .navbar-collapse.collapse {
1846+
display: block!important;
1847+
}
1848+
1849+
.mobile-menu .navbar-collapse.collapse,
1850+
.mobile-menu .nav-bar .module-group .module.hidden-xs,
1851+
.mobile-menu .nav-bar .module-group .module.hidden-sm {
1852+
display: none !important;
1853+
}
1854+
.mobile-menu #site-navigation .container > .flex-row {
1855+
flex-wrap: wrap;
1856+
}
1857+
.mobile-menu .nav-bar, .nav-bar .module-group,
1858+
.mobile-menu .nav-bar .module,
1859+
.mobile-menu .nav-bar .module:not( .site-title-container ) {
1860+
height: auto;
1861+
}
1862+
.mobile-menu .nav-bar .module {
1863+
padding: 0 16px;
1864+
}
1865+
.mobile-menu .navbar-collapse {
1866+
margin-top: 20px;
1867+
width: 100%;
1868+
}
1869+
.mobile-menu .main-navigation .menu li {
1870+
line-height: 24px;
1871+
display: block;
1872+
width: 100%;
1873+
max-width: 100%;
1874+
}
1875+
.mobile-menu .main-navigation .menu a {
1876+
height: auto;
1877+
line-height: 24px;
1878+
padding: 4px 0;
1879+
}
1880+
.mobile-menu .shapely-dropdown {
1881+
float: right;
1882+
border: 1px solid;
1883+
font-size: 11px;
1884+
padding: 0 10px;
1885+
display: inline-block;
1886+
cursor: pointer;
1887+
}
1888+
.mobile-menu .main-navigation .menu > li > ul {
1889+
position: relative;
1890+
opacity: 1;
1891+
visibility: visible;
1892+
display: none;
1893+
transform: translate3d(0, 0px, 0);
1894+
-webkit-transform: translate3d(0, 0px, 0);
1895+
-moz-transform: translate3d(0, 0px, 0);
1896+
width: 100%;
1897+
left: 0;
1898+
border: 0 !important;
1899+
box-shadow: none;
1900+
}
1901+
.mobile-menu .dropdown:after {
1902+
display: none;
1903+
}
1904+
.mobile-menu ul.dropdown-menu.active {
1905+
display: block !important;
1906+
}
1907+
.mobile-menu .module-group .module.left {
1908+
float: none;
1909+
display: block;
1910+
}
1911+
.mobile-menu .main-navigation .menu > li ul {
1912+
position: relative;
1913+
width: 100%;
1914+
opacity: 1;
1915+
visibility: visible;
1916+
transform: translate3d(0, 0px, 0);
1917+
-webkit-transform: translate3d(0, 0px, 0);
1918+
-moz-transform: translate3d(0, 0px, 0);
1919+
left: 0;
1920+
border: 0 !important;
1921+
box-shadow: none;
1922+
}
1923+
.mobile-menu .main-navigation .menu > li > ul > li ul {
1924+
left: 0 !important;
1925+
display: none;
1926+
padding: 0;
1927+
}
1928+
.mobile-menu #site-navigation.main-navigation .menu > li > ul li a {
1929+
width: auto;
1930+
display: inline-block;
1931+
padding: 10px 16px;
1932+
}
1933+
.mobile-menu .main-navigation .menu > li > ul li a {
1934+
padding: 10px 16px;
1935+
}
1936+
.mobile-menu .main-navigation .dropdown .dropdown li {
1937+
padding-left: 18px;
1938+
}
1939+
.mobile-menu .main-navigation .menu > li > ul li a:hover,
1940+
.mobile-menu .main-navigation .menu > li > ul li:hover > a {
1941+
background-color: #fff;
1942+
}
1943+
.mobile-menu .search-widget-handle .search {
1944+
padding: 0 15px;
1945+
}
1946+
.mobile-menu .widget-handle .function {
1947+
width: 100%;
1948+
max-width: 300px;
1949+
position: relative;
1950+
opacity: 1;
1951+
transform: translate3d(0, 0px, 0);
1952+
-webkit-transform: translate3d(0, 0px, 0);
1953+
-moz-transform: translate3d(0, 0px, 0);
1954+
visibility: visible;
1955+
margin-top: 0;
1956+
display: none;
1957+
box-shadow: none !important;
1958+
}
1959+
.mobile-menu .module.widget-handle .title {
1960+
display: inline-block;
1961+
position: relative;
1962+
bottom: 3px;
1963+
margin-left: 8px;
1964+
}
1965+
.mobile-menu .toggle-search .function {
1966+
display: block;
1967+
}
1968+
}
1969+
18331970
@media all and (max-width: 991px) {
18341971
.site-title-container {
18351972
width: 84%;
@@ -1957,7 +2094,7 @@ nav.fixed.scrolled {
19572094
.mobile-toggle i {
19582095
line-height: 53px !important;
19592096
}
1960-
#site-navigation .container > .row {
2097+
#site-navigation .container > .flex-row {
19612098
flex-wrap: wrap;
19622099
}
19632100
.navbar-collapse {

0 commit comments

Comments
 (0)