• How do we use Ocean Wp’s Full-Screen menu in a custom header?

    Adding custom header creating 3 columns. Any content in the left column, logo in middle then Ocean WP’s full-screen menu in third on the right.

    <div id="full-screen-menu" class="clr">
            <div id="full-screen-menu-inner" class="clr">
    		<?php get_template_part( 'partials/header/nav' ); ?>
    	</div>
    </div>

    There’s no raw in elementor and the above that I took from oceanwp/partials/header/style/full-screen-header.php won’t work with the html element.

    Many thanks for any advice.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter kingfisher64

    (@kingfisher64)

    There is an elementor element called “nav menu” however it’s not as usable or neat looking like the ocean wp one. https://prnt.sc/pq93t9

    There’s also https://wordpress.org/plugins/full-screen-menu-for-elementor/ but again it doesn’t look like the screenshot linked.

    How do we use YOUR lovely Full-Screen menu guys?

    Thanks

    Hello,

    I don’t think it is possible at present. You can use a third-party plugin that offers the full-screen menu widget or shortcode.

    Thread Starter kingfisher64

    (@kingfisher64)

    Would be great to have it part of https://oceanwp.org/extension/ocean-elementor-widgets/.

    Or

    perhaps making some of the menu layouts a little more flexible so we can create a few layouts using one style?

    I’ve tried for example moving the logo from left to the centre in oceanwp/partials/header/style/full-screen-header.php and adding an extra area on the left so it’s basically 3 columns. eg, text on left, logo middle, full-screen menu right.

    You have something near this already on the medium-header.php style https://prnt.sc/pqu9vh and minimal styles https://prnt.sc/pquaox

    Hello,

    We will try to consider it for future versions of OceanWP.

    Thread Starter kingfisher64

    (@kingfisher64)

    Thanks Amit, I’ve scoured for megamenu fullpage solutions that work with elementor out of the box and they are not there at present, would be a tick in the box of unique.

    Thanks again.

    Thread Starter kingfisher64

    (@kingfisher64)

    Managed to hack together this design together by using the top menu as well and importing a custom header into the social area then absolutely positing hamburger menu from the actual header so effectively the header is using full-screen menu but it’s aligned with top menu instead.

    Would much rather work with rather than against Ocean WP at this point.

    Can you tell me how to effectively add an additional content area box https://prnt.sc/pquaox to the customizer? Is there any documentation?

    For quickness, this is the code in partials/header/style/full-screen-header.php

    <?php
    /**
     * Full Screen Header Style
     *
     * @package OceanWP WordPress theme
     */
    
    // Exit if accessed directly
    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }
    
    // Get classes
    $classes = array( 'clr' );
    
    // Add container class
    if ( true != get_theme_mod( 'ocean_header_full_width', false ) ) {
        $classes[] = 'container';
    }
    
    // Turn classes into space seperated string
    $classes = implode( ' ', $classes ); ?>
    
    <?php do_action( 'ocean_before_header_inner' ); ?>
    
    <div id="site-header-inner" class="<?php echo esc_attr( $classes ); ?>">
    
    	<?php do_action( 'ocean_header_inner_left_content' ); ?>
    
    <!-- NEW CONTENT AREA BOX TO GO HERE -->
    
    	<?php get_template_part( 'partials/header/logo' ); ?>
    
    	<div id="site-navigation-wrap" class="clr">
    				
    		<div class="menu-bar-wrap clr">
    			<div class="menu-bar-inner clr">
    				<a href="#" class="menu-bar"><span class="ham"></span></a>
    			</div>
    		</div>
    
    		<div id="full-screen-menu" class="clr">
    			<div id="full-screen-menu-inner" class="clr">
    				<?php get_template_part( 'partials/header/nav' ); ?>
    			</div>
    		</div>
    
    	</div><!-- #site-header-wrap -->
    
    	<?php do_action( 'ocean_header_inner_right_content' ); ?>
    
    </div><!-- #site-header-inner -->
    
    <?php get_template_part( 'partials/mobile/mobile-dropdown' ); ?>
    
    <?php do_action( 'ocean_after_header_inner' ); ?>

    Many thanks for your time it’s very much appreciated, I think this would definitely make Ocean Full-Screen Menu style much stronger with v little changes at all.

    • This reply was modified 6 years, 7 months ago by kingfisher64.
    Thread Starter kingfisher64

    (@kingfisher64)

    Hope the above is easily understandable. It’s this in essence https://prnt.sc/pwivbr

    Thread Starter kingfisher64

    (@kingfisher64)

    Hello, I understand you have many other priorities. I did ask for some help in paid ticketing system for the paid plugin I bought the ocean widgets πŸ™‚

    Would you consider adding the fullscreen widget to your paid plugin https://oceanwp.org/extension/ocean-elementor-widgets/? This way a custom header can be used.

    I know you mentioned you would consider above but I wasn’t sure if that was for this suggestion or the other one mentioned in that specific post.

    Thanks again.

    Thread Starter kingfisher64

    (@kingfisher64)

    Any more news? I realise you are probably swamped.

    I have no problem buying https://oceanwp.org/extension/ocean-elementor-widgets/ again if needed to with the fullscreen menu widget included?

    Kind regards and thanks for your time.

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

The topic ‘Custom Header Using Ocean WP Full Screen Menu’ is closed to new replies.