< Tu wordpress a medida />
¿Cómo cambiar la posición del menú topbar a la derecha en OceanWP?

¿Cómo cambiar la posición del menú topbar a la derecha en OceanWP?

Crea el Child Theme de OceanWP, si ya lo tienes o tenías creado, ahora añade en la raíz de este Child una carpeta llamada “partials” y dentro de esta carpeta crea otra llamada “topbar”.

Ocean Menú TopBar

Aquí crearemos un nuevo archivo content.php que contendrá el siguiente código:

<?php
/**
 * Topbar content /partials/top-bar
 *
 * @package OceanWP WordPress theme
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Get the template
$template = get_theme_mod( 'ocean_top_bar_template' );

// Check if page is Elementor page
$elementor = get_post_meta( $template, '_elementor_edit_mode', true );

// Get content
$get_content = oceanwp_topbar_template_content();

// Get topbar content
$content = get_theme_mod( 'ocean_top_bar_content' );
$content = oceanwp_tm_translation( 'ocean_top_bar_content', $content );

// Display topbar content
if ( ! empty( $template )
    || $content
    || has_nav_menu( 'topbar_menu' )
    || is_customize_preview() ) : ?>

    <div id="top-bar-content" class="clr has-content">

        <?php
        // If template
        if ( ! empty( $template ) ) { ?>

            <div id="topbar-template">

               <?php
               // If Elementor
                if ( OCEANWP_ELEMENTOR_ACTIVE && $elementor ) {

                    OceanWP_Elementor::get_topbar_content();

                }

                // If Beaver Builder
                else if ( OCEANWP_BEAVER_BUILDER_ACTIVE && ! empty( $template ) ) {

                    echo do_shortcode( '[fl_builder_insert_layout id="' . $template . '"]' );

                }

                // Else
                else {

                    // Display template content
                    echo do_shortcode( $get_content );

                    // Get topbar menu
                    if ( has_nav_menu( 'topbar_menu' ) )  {
                        get_template_part( 'partials/topbar/nav' );
                    }
                } ?>

            </div>

        <?php
        } else { ?>

            <?php
            // Check if there is content for the topbar
            if ( $content
                || is_customize_preview() ) : ?>

                <span class="topbar-content">

                    <?php
                    // Display top bar content
                    echo do_shortcode( $content ); ?>

                    <?php
                    // Get topbar menu
                    if ( has_nav_menu( 'topbar_menu' ) )  {
                        get_template_part( 'partials/topbar/nav' );
                    } ?>

                </span>

            <?php endif;

        } ?>

    </div><!-- #top-bar-content -->

<?php endif; ?>

Ahora en el personalizador de OceanWP > Custom CSS/JS añade estas dos líneas:

#top-bar-nav {float:right;}
#top-bar-content {max-width:100%;}

Habrás conseguido tener el contenido a la izquierda y a la derecha el menú que hayas configurado y localizado en BarraSuperior.

¿Ha sido útil esta publicación?
Déjanos tu feedback para poder ayudar a otros usuarios.
0
No0

Deja un comentario