jenova007

Forum Replies Created

Viewing 2 replies - 1 through 2 (of 2 total)
  • Forum: Plugins
    In reply to: [ShiftNav - Responsive Mobile Menu] Replace a custom menu with shiftnav menu in Divi
    Thread Starter jenova007

    (@jenova007)

    9 years, 7 months ago

    Hi,
    I believe that I have figured out how to place the shiftnav toggle bar in the right location (hopefully it is correct).

    I have placed the following code provided in your knowledge base in Divi’s header.php file just before the end of the #et-top-navigation div as follows:

    <?php
shiftnav_toggle( 'shiftnav-main' , 'PRODUCT MENU' , array(
     'id' => 'my-special-toggle',
     'el' => 'span',
     'class' => 'button'
) ); ?>
</div> <!-- #et-top-navigation -->
			</div> <!-- .container -->

    It appears in the correct position and I have unchecked the “Display Toggle Bar” setting in the Toggle Bar tab. However, I also need the burger icon with the open/close functionality next to it. How do I place this burger icon before the custom toggle just like Shiftnav’s default toggle bar?

    Thank you.

    Forum: Plugins
    In reply to: [Responsive Menu - Create Mobile-Friendly Menu] How to make menu overlap content, not push it down
    jenova007

    (@jenova007)

    9 years, 7 months ago

    Hi,
    I have a similar issue.
    I have placed the “<?php echo do_shortcode(‘[responsive_menu]’); ?>
    </header> <!– #main-header –>” just before the closing header tag in my theme header.php file.
    As my fixed header is of variable height, I have the following css style to place the responsive menu button and responsive menu container.

    @media screen and (max-width: 766px) {
#responsive-menu {position: relative;
top: 0;}

button#responsive-menu-button {width: 100%;
position: relative;
top: 0;
left:0;
height: 45px;
background-color: rgba(0, 0, 0, 0.32);}

button#responsive-menu-button .responsive-menu-label {
margin:0 10px 0 10px !important;}

button#responsive-menu-button .responsive-menu-box {
margin:0 10px 0 10px !important;}

#responsive-menu-container {position: relative !important;}
}

    However, when I load my page, I see a blank area (the same color as my header) below the responsive menu button. My original main content has been pushed below this blank space. The responsive menu does work. When I click on the hamburger icon, it slides my designated menu exactly into the blank area below the button. And when I click the hamburger icon to close the menu, it slides the menu away to the right, but leaves an unwanted horizontal scroll bar below as well as the blank area below the menu button. What seems to be happening is that my header height gets expanded to accomodate the responsive menu (fair enough), but when the menu is closed, it leaves this blank area behind.

    I was hoping that the menu when clicked, will slide over the existing main content, and on close will slide away, revealing the main content underneath it or expand the header only when the menu is in opened state and in closed state will display my existing content as normal.

    What am I doing wrong? I can provide a url for my website if needed. Would appreciate if you could tell me where to post my username and password.

    Thank you for your help.

Viewing 2 replies - 1 through 2 (of 2 total)