Hey!
can you help me to make my main responsive menu sticky?
also i have a menu in my store page and it has no responsive menu.
so i have 2 questions please if i may:
1 ) how i make my homepage menu sticky when its responsive.
2) how i make my store menu and cart menu responsive ,
Hi,
Thanks for writing in!
Theme Options > CSS
@media (max-width: 767px) {
.x-navbar.x-navbar-fixed-top {
position: fixed;
top: 62px;
}
}
Thanks
Hey!
Thanks!
in my Homepage i have the Superfly menu and it hides the wpadminbar, is there any way we can place the superfly responsive menu under the wpadminbar (in a responsive mode)
and secondly on my store page, the menu does not even toggles to responsive one.
is there a chance we could replace this element (wordpress logo) with image and link i can choose? (responsive mode) screenshot: http://prntscr.com/jnfu5f
also on homepage i am trying to change the breakpoint of the superfly to 1200, and make the wpadminbar submenues to go over it, i have tried doing zindex 99999999 and its not working, the superfly and navbar are still above the wpadminbar.
Thanks!
Hi,
Theme Options > CSS
.admin-bar.superfly-on #sfm-sidebar {
top: 45px;
}
You can adjust breakpoint in ubermenu settings - https://sevenspark.com/docs/ubermenu-3/responsive/breakpoints/custom
This is added by wordpress and is not in anyway part of the theme
You can try this code.
body #wpadminbar {
z-index: 99999999 !important;
}
Hope that helps
Hey!
Perhaps this could lead to a solution because i have set the shop menu with those css:
/*
// Shop Menu
*/
#cart {
position: fixed;
top: 37px;
left: 0;
z-index: 99999;
}
.woocommerce-page #ubermenu-nav-main-37-primary {
display: none;
position: relative;
}
.woocommerce-page #sfm-mob-navbar {
display: none;
position: relative;
}
.woocommerce-page .x-topbar {
display: none;
position: relative;
}
.woocommerce-page .ubermenu-responsive-toggle {
display: none;
position: relative;
}
.woocommerce-page #ubermenu-store-93-store-menu-2 {
visibility: visible;
position: fixed;
left: 580px;
top: 33px;
z-index: 99999999 !important;
}
.woocommerce-page .ubermenu-nav-cart-153-cart-menu {
position: fixed;
left: 0px;
top: 70px;
}Hi,
Please provide sreenshot showing the issue.
Check threshold point
@media screen and (max-width: 1200px) {
.ubermenu-responsive.ubermenu-responsive-collapse {
max-height: 0px;
}
}
You are setting max-height equals to zero which makes your menu not visible @ 1200px
Change it to higher number.
Thanks
Hey!
thanks it worked, solved.
the code affects the other menu (not the shop menu) the issue is that store menu and cart menu does not have a responsive toggle at all. what do you think may cause this?
P.S. is it possible with css to remove the background color of the responsive toggle? as seen in this screenshot , so only the button will be shown? >> http://prntscr.com/joalc5
Hi,
Theme Options >CSS
@media screen and (max-width: 1200px) {
#sfm-mob-navbar {
z-index:999;
}
}
You can try adding this code
@media screen and (max-width: 1200px) {
.woocommerce .ubermenu-responsive.ubermenu-responsive-collapse {
max-height: 58px !important;
}
}
Same as Superfly Menu, you will need to adjust the responsive breakpoint
Please review ubermenu documentation
Theme Options > CSS
@media screen and (max-width: 1200px) {
.x-navbar {
background-color: transparent !important;
}
}
Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.
Thanks for understanding.
Hey Paul!
Thanks great! it worked!, Solved!
Thanks! Solved!
as for 3, i set everything you told me, i just dont understand why this menu does not has toggle when screen collapse to 1200px, thought when i view the store menu in sandbox it does collapses
i have positioned the store menu with a css, perhaps i missed the responsive toggle id or something?
how exacly can i know the id of the responsive toggle so i can put it in css as well when screen collapses?
please help, i appreciate your help very much! its realy my last thing left on my website.
.woocommerce-page #ubermenu-store-93-store-menu-2 {
visibility: visible;
position: fixed;
left: 580px;
top: 33px;
z-index: 99999999 !important;
}
A little update:
This is all the css code for my store menues , store and cart menues.
when i am removing them, they do show in the store and they are responsive, but they are in a mess and not positioned well.
something in the css code here is missing to allow them to be responsive toggled
those are all my store menus css:
/*
// Shop Menu
*/
#cart {
position: fixed;
top: 37px;
left: 0;
z-index: 99999;
}
/ max-height: 58px !important;
@media screen and (max-width: 1200px) {
.woocommerce .ubermenu-responsive-toggle .ubermenu-responsive-toggle-store .ubermenu-skin-black-white-2 .ubermenu-loc-store-menu .ubermenu-responsive-toggle-content-align-center .ubermenu-responsive-toggle-align-full {
visibility: visible;
position: fixed;
left: 580px;
top: 33px;
z-index: 99999999 !important;
}
}
@media screen and (max-width: 1200px) {
.woocommerce .ubermenu-responsive.ubermenu-responsive-collapse {
max-height: 58px !important;
}
}
.woocommerce-page #ubermenu-nav-main-37-primary {
display: none;
position: relative;
}
.woocommerce-page #sfm-mob-navbar {
display: none;
position: relative;
}
.woocommerce-page .x-topbar {
display: none;
position: relative;
}
.woocommerce-page .ubermenu-responsive-toggle {
display: none;
position: relative;
}
.woocommerce-page #ubermenu-store-93-store-menu-2 {
visibility: visible;
position: fixed;
left: 580px;
top: 33px;
z-index: 99999999 !important;
}
.woocommerce-page .ubermenu-nav-cart-153-cart-menu {
position: fixed;
left: 0px;
top: 70px;
}
Please Help me solve this, i dont understand much in css, perhaps some line is missing. because when i remove all this code , they do responsive toggle.
if its too much work for you then i can understand.
i dont want to be annoying, only if you can help and its easy for you i would very much appreciate it!
Hi,
There are lots of conflicting css codes in your site. I am sorry but this particular issue is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.
Thank you for your understanding.
ok thanks
i have a question, how can i undo this command:
background-color: transparent
Hi,
Not really sure what you mean, you can add a color to it to undo that css.
eg.
background-color: white;
Ok thanks i think that what i will do,
What i ment is that,
remeber you gave me that code:
@media screen and (max-width: 1200px) {
.x-navbar {
background-color: transparent !important;
}
}
I just want to revert it when its in woocomerce mode.
so i guess i will do the color code in that.
thanks!
Hi,
Yes, you can override that code using this,
@media screen and (max-width: 1200px) {
.woocommerce .x-navbar {
background-color: white !important;
}
}
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.