[Jay BParticipant]

Hi X-Theme!

Guys I need some help in styling a site I’m about to begin and I think this will potentially answer a lot of peoples problems if it’s cracked looking at some of the many requests.

With UberMenu being an awesome feature for X it would be great to utilise it the way that it displayed on the UberMenu website with the logo on the left and button on the right hand side as shown here – http://wpmegamenu.com or as this X customer has specifically done using the sidebar – http://www.ragebracing.com

The trouble is with X is that it leaves a huge empty space when using the UberMenu and seems a waste not to utilise it.

Could you possibly provide a php function stylesheet to compliment the Ubermenu so that it can display a sidebar(widget function), giving X users the choice to insert anything they wish in said sidebar(widget area)?

This is first thing that their customers will see when visiting a page and although in marketing the use of white space is important it seems a waste of space having this area empty and uncustomisable out of the box.

I’ll leave my site in a private box below – for me this is for Woocommerce cart as the built in X search and Woocommerce cart items and total in the X-Customiser do not integrate with UberMenu.

Your help would be much appreciated.

[Jay BParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Are you referring the space beside the logo? You can use CSS like this to place the menu on right to get rid of the spacing :

.ubermenu-responsive-default.ubermenu {
  float: right;
  margin-top: -30px;
}

Let us know if that helps.

[Jay BParticipant]

Hey,

Sorry no the spacing I can fix using CSS as the work on the menu itself hasn’t even begun.

I mean the logo bar above the menu so like the below:

————————-Top Bar—————————-

LOGO———————logo-bar————————–WIDGET AREA(instead of blank space)

————————-Uber Menu————————————

Let me know if that makes sense 🙂

J

[JoaoModerator]

Hi There

Go to Appereance > Customizer > Header and change your header to stacked.

On the same tab you can activate the topbar content.

After that follow this thread to learn how to add a widget to your logobar.

add widget area to header

Hope it helps

Joao

[Jay BParticipant]

Hey,

I followed the link but I’m afraid that customer of yours when reading it properly is looking for something very specific to woocommerce – the pHp in that code points to adding a woocommerce cart and a search box I believe, and absolutely nothing to do with pointing a sidebar or widget area that can be managed in the widgets section of your WP-Panel.

The idea of my original post here is to of course assist me, but also to amalgamate all of these queries which are going beyond coding support by allowing customers to assign one or two widget areas in said area so that they can change this promotionally if needs be without asking the X team for support. By allowing a widget area in the header to compliment the Uber Menu style customers will be able to customise it as they please.

As the header of the website this is a crucial area to customise seasonally or a prime advertising space for a blog – Would be cool if X would provide an easier customisation method?

J

[Paul RModerator]

Hi Jay,

To achieve that, you can add this in your child theme’s functions.php file

add_action('x_after_view_global__brand', 'ph_besides_logo');

function ph_besides_logo() { 
  $logo_nav_layout = x_get_logo_navigation_layout();
  if ( $logo_nav_layout == 'stacked' ) {
    get_search_form();
?>
  <div class="header-right">
<?php if ( is_active_sidebar( 'header_right' ) ) : ?>
    <div class="header-right widget-area">
        <?php dynamic_sidebar( 'header_right' ); ?>
    </div><!-- #primary-sidebar -->
<?php endif; ?>
  </div>
<?php } 
}

function header_right_init() {

    register_sidebar( array(
        'name'          => 'Header Right',
        'id'            => 'header_right',
        'before_widget' => '<div>',
        'after_widget'  => '</div>',
        'before_title'  => '<h2">',
        'after_title'   => '</h2>',
    ) );

}
add_action( 'widgets_init', 'header_right_init' );

Add this in Custom > Edit Global CSS in the customizer

.masthead-stacked .x-brand { 
    float:left;
}

.header-right {
    float:right;
    display:block;
    padding:10px;
}

Then navigate to Appearance > Widgets to add contents to your newly created widget

http://screencast.com/t/1KuqqpvRkXI

Hope that helps.

[Jay BParticipant]

So I’ve tried this out here: http://autopot.co.uk.365webstudio.com

It’s is on the road to working perfectly, however it has been pointed to the incorrect “stacked” layout when really this will only aesthetically work or look right in the “Inline” layout as I mentioned above when enquiring so as the logo continues to be on the left and the space is clear on the right while using the UberMenu.

Is there an edit to this using the Inline stack that I can use? You can see from my link why it doesn’t work using “stacked” 🙂

Thanks for your continued support 😀

Jay

[LelyModerator]

Hello Jay,

Please go to Appearance > Customize > Header > Logo and Navigation > Layout: Choose Inline. Then on Appearance > Customize > Custom > Edit Global CSS add the following CSS:

.x-logobar-inner form#searchform {
    display: inline-block;
}

Also update above PHP code on your child theme’s functions.php file to this:

add_action('x_after_view_global__brand', 'ph_besides_logo');

function ph_besides_logo() { 
  $logo_nav_layout = x_get_logo_navigation_layout();
  get_search_form();
?>
  <div class="header-right">
<?php if ( is_active_sidebar( 'header_right' ) ) : ?>
    <div class="header-right widget-area">
        <?php dynamic_sidebar( 'header_right' ); ?>
    </div><!-- #primary-sidebar -->
<?php endif; ?>
  </div>
<?php 
}

function header_right_init() {

    register_sidebar( array(
        'name'          => 'Header Right',
        'id'            => 'header_right',
        'before_widget' => '<div>',
        'after_widget'  => '</div>',
        'before_title'  => '<h2">',
        'after_title'   => '</h2>',
    ) );

}
add_action( 'widgets_init', 'header_right_init' );

Hope this helps.

[Jay BParticipant]

Getting there although it still doesn’t float right (it spans the whole width of the page) and the search bar isn’t necessary because it can be added in via the widget function as currently shown so now I have two search bars :).

Whole new function needs to span left
Search bar can be removed as this should be optional per wordpress installation using this nifty lil feature

http://autopot.co.uk.365webstudio.com

Thankyou for your continued support

J

[RadModerator]

Hi there,

Please remove this from the provided code

get_search_form();

And remove the search from your widget. Then add this CSS,

.header-right {
float: right;
}

Hope this helps.

[Jay BParticipant]

Worked perfectly, thank you!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Jay BParticipant]

Hey guys,

I was wondering how I can get the image on the right (using header widget) in my navbar to float flush with the search bar in the middle and the logo on the left. Everything I insert in the widget area seems to drop below the built in search bar and logo.

http://autopot.co.uk.365webstudio.com

All login info above is still up to date if you need to login.

Many Thanks

Jay

[Nabeel AModerator]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.form-search, .widget_product_search form {
    float: left !important;
    width: 60% !important;
}
.form-search:before, .widget_product_search form:before {
    top: 36px !important;
}
input#s.search-query {
    width: 100% !important;
}

Let us know how this goes!

[Author]

Posts