[Jay BParticipant]

Thank you so much that works so well!

I’m really impressed with the fact X can now allow us to mess around with the blank space when the website is stacked! Absolute game changer!

R.E the same site when then uber menu is in responsive mode it kind of jiggles up with the search bar instead of sitting where it should. Is there any quick jiggery pokery to nudge it to where it should be?

Many Many Thanks!!

Jay

[Jay BParticipant]

Also in addition to the previous question the CSS provided has jumbled up the widgets in the sidebar on this page 🙁
http://autopot.co.uk.365webstudio.com/products/

[Paul RModerator]

Hi Jay,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.x-widget-area .widget {
	clear:both;
	overflow:hidden;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 133px;
}

Hope that helps.

[Jay BParticipant]

That fixed the widget issue thank you, but the menu bar in mobile version is still not looking correct.

The navbar still sits at the top of the site as you can see. The navbar typically sits beneath the logo on all of my other websites?

J

[Jay BParticipant]

Also the product search in the sidebar widget on the left of this page is affected by the CSS as it is shortened by 40% the same as the navbar in the top.

Is there any way that the CSS I used for the top of the page can be concentrated solely on that area or I’m in danger of using too much css to adjust the css that the css is breaking (Hope that makes sense 😀 )

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

[JoaoModerator]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-topbar {
    border: 0;
}
.ubermenu-skin-tt-silver.ubermenu-responsive-toggle:hover, .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main  {
  background: none;
}
.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
    float: left;
}

Regarding your search it looks the same on both in every screen this and other pages, would you mind to clarify.

Thanks

[Jay BParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Please add the following code in your Customizer:

.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
    clear: both;
}

Replace this code:

.form-search, .widget_product_search form {
    float: left !important;
    width: 55% !important;
}

With this:

.x-navbar .form-search, .x-navbar .widget_product_search form {
    float: left !important;
    width: 55% !important;
}

Let us know how this goes!

[Jay BParticipant]

You guys are the web dons!

Thanks so much for your support! This modification/fix has just secured 4 more X licenses 🙂

[NicoModerator]

Happy to hear that. 🙂 🙂

Feel free to ask us again.

Thanks.

[Jay BParticipant]

Hi me again 🙂

So apart from loving the new function it has been decided that it looks a little too much on a cell phone. Is there a way I can hide the search bar and right hand widget on a mobile phone only?

Every attempt I make seems to hide it on every device :-/

Appreciate any advice!

J

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:979px){
form#searchform,.header-right {
    display: none;
}
}

Hope that helps.

[Jay BParticipant]

Thanks Christopher You’re a gem!

How about the logo centred in mobile view too?

J

[Paul RModerator]

Hi,

To center it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
	a.x-brand.img {
            text-align: center;
	    float:none;
	}
}

Hope that helps.

[Author]

Posts