-
Posts
-
Hello,
I have a fullwith-submenu in my site, which is for the mobile only view but I would like to use sidebar menu in the desktop and tablet view.
So my question is how can I hide currently existing fullwith submenu in the desktop and mobile view.
You can see the page in private.
Hi pimroll!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (min-width: 1025px) and (max-width: 767px) { #top .av-submenu-container { display: none !important; }}Regards,
YigitHello Yigit,
My mistake I meant to hide on desktop and tablet.
I added the code but it is still visible on my desktop.
Hi,
If you want to hide it on both desktop and tablet, try to replace this part of Yigit’s code
@media only screen and (min-width: 1025px) and (max-width: 767px) {to
@media only screen and (min-width: 768px) {Hope this helps :)
Best regards,
NikkoHello Nikko,
Before I lose the fullwith submenu on desktop and tablet how can I have the same effects on the desktop and tablet sidebar menu.
Example is here: http://imgur.com/a/2lmDR
I would like that the desktop and tablet sidebar menu to have exactly the same effects like the fullwith submenu right now have.
By that I mean the blue line under the menu item, when I hover and by default the menu items colour should be black.How can I change it?
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.widget_nav_menu .current_page_item .avia-menu-fx { opacity: 1; visibility: visible; }and then add following code to functions.php file in Appearance > Editor
function avia_add_menu_fx(){ ?> <script> jQuery(window).load(function(){ jQuery('.widget_nav_menu ul:first-child>.current_page_item>a').append('<span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span>'); }); </script> <?php } add_action('wp_footer', 'avia_add_menu_fx');Best regards,
YigitHey,
The one in imgur shows a left sidebar, but since you want a right sidebar, you can edit the page and then find Sidebar Settings in Layout box (in the right) and set it to Right Sidebar.
For changing the blue line, just add this css code in your Quick CSS:
.main_color .avia-menu-fx { background-color: #000 !important; }Regards,
NikkoHello Yigit,
Thanks the blue line is there now but what was the code for the blue line to appear when you hover your cursor on the menu item just like it is at the moment in the fullwith submenu.
I would like the same effect in the left sidebar menu.
Hello Nikko,
You gave me the code of:
@media only screen and (min-width: 768px) {
#top .av-submenu-container { display: none !important; }}This for sure hides the fullwith submenu but it still leaves a big empty space. How is it possible to delete the space so the slider and the content page will come together and the space is gone.http://imgur.com/a/gnamd
All I want to do is to display the fullwith submenu on mobile phones and to display the leftside menu on pc and tablets.
Hey!
Try to replace this part of the code:
#top .av-submenu-container { display: none !important; }to this:
#top .av-submenu-container, .sticky_placeholder { display: none; }Cheers!
NikkoHello Nikko,
It does the trick but it also resets half of the changes on the page (please try to add the code yourself to see it yourself).
Look at the site before and after you apply the code and you will see what I am talking about.
Hey!
I have added this code in Quick CSS (I have adjusted the code to make it specific only for the page):
@media only screen and (min-width: 768px) { #top.page-id-2947 .av-submenu-container, #top.page-id-2947 .sticky_placeholder { display: none !important; } }I have compared both and the only difference is the submenu module isn’t showing in both desktop (my reference page is the one in the private content).
Regards,
NikkoHello Nikko,
My goal is to remove the submenu in all pages in desktop and tablet but why is it not showing only in the page which is in your private.
How can we add the other pages too, so it will not show in pc and tablet in other pages too?Hi pimroll,
Just replace this part of the code I gave (the latest):
#top.page-id-2947 .av-submenu-container, #top.page-id-2947 .sticky_placeholderto this:
#top .av-submenu-container, #top .sticky_placeholderCheers!
NikkoHello Nikko,
So I need to use the code?
@media only screen and (min-width: 768px) {
#top .av-submenu-container,
#top .sticky_placeholder
display: none !important;
}
}Hey!
Sure, I have replaced the code I gave to this:
@media only screen and (min-width: 768px) { #top .av-submenu-container, #top .sticky_placeholder { display: none !important; } }Regards,
NikkoHello Nikko,
Thanks looks good now, one more thing:)
I dont even remember what was the code you placed but after one of the codes the mobile menu is in the bold (it was not before). Is it possible to make it unbold again?
- You must be logged in to reply to this topic.