Problem with a dropdown. The same code PHP generates a different CSS in two case

  • Resolved reti

    (@reti)


    4 years, 6 months ago

    Example: https://www.freuciv.com/test/

    There is a dark and light mode switch on the menu bar. When you hover the mouse over it, a dropdown appears. The PHP code of this button is:

    <?php
$bimber_class = array(
    'g1-drop',
    'g1-drop-nojs',
    'g1-drop-before',
    'g1-drop-the-skin',
    'g1-drop-the-skin-' . bimber_get_theme_option( 'global', 'skin' ),
);
$bimber_class = array_merge(
    $bimber_class,
    explode( ' ', bimber_hb_get_element_class_from_settings( 'skin_dropdown', false ) )
);
$bimber_class = array_filter( $bimber_class );
?>
<div class="<?php echo implode( ' ', array_map( 'sanitize_html_class', $bimber_class ) ); ?> g1-dropable g1-column">
    <button class="g1-button-none g1-drop-toggle">
        <span class="g1-drop-toggle-icon"></span><span class="g1-drop-toggle-text"><?php esc_html_e( 'Switch skin', 'bimber' ); ?></span>
        <span class="g1-drop-toggle-arrow"></span>
    </button>
    <?php if ( bimber_get_theme_option( 'header_builder', 'element_content_skin_dropdown' ) ) : ?>
        <div class="g1-drop-content">
            <?php if ( 'dark' ===  bimber_get_theme_option( 'global', 'skin' ) ) : ?>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the light mode that\'s kinder on your eyes at day time.', 'bimber' ); ?></p>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the dark mode that\'s kinder on your eyes at night time.', 'bimber' ); ?></p>
            <?php else : ?>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the dark mode that\'s kinder on your eyes at night time.', 'bimber' ); ?></p>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the light mode that\'s kinder on your eyes at day time.', 'bimber' ); ?></p>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>

<?php wp_enqueue_script( 'bimber-skin-mode' ); ?>

    I copied this code and put it in the middle of the page. Why does the dropdown only appear at the top switch? I noticed that div.g1-drop-content in the second case has a completely different style list. What is the reason for this?

    A colleague from StackOverflow suggests it has to do with Bootstrap Tooltip. I don’t quite understand what he means. I added a tooltip class to the button, but that didn’t change anything.

    • This topic was modified 4 years, 6 months ago by reti.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    I don’t think it’s a Bootstrap tooltip. The usual attributes are missing for that. It appears to be a simple hover effect using CSS. The problem with your copied version is likely the appropriate HTML hierarchy is no longer proper to invoke the needed CSS rules. Additionally, some other conflicting rule might be applied that is not applied to the original.

    Use your browser’s element inspector developer tool to help you learn the needed rules to get your version working. Compare against the working version for guidance. Once you learn the right rules, add them to the Additional CSS panel of the customizer. The needed CSS will largely revolve around visibility and display properties combined with the :hover pseudo-selector.

    Thread Starter reti

    (@reti)

    Thanks. Solved. The “g1-dropable” class was missing.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Problem with a dropdown. The same code PHP generates a different CSS in two case’ is closed to new replies.