-
Posts
-
Ahoy –
I followed this thread https://kriesi.at/support/topic/logo-in-fullwidth-submenu/) to add a logo to my site and was wondering if there is a way to make the logo bigger and add some space on the left – so it isnt so tight to the edge?
Also is there a way to make the menu links bigger and a different font?
Hey mcraig77,
Sorry for the late reply, the only thing you can do to make it bigger is to make the containing element bigger. You can try something like this in Quick CSS:
#sub_menu1 { min-height: 100px !important; }Not sure if that is what you are looking for. If not then please try to explain a bit further and/or post a screenshot of the result you are looking for.
Thanks,
RikardHi,
Ok, try adding the following as well:
#sub_menu1 { padding-top: 25px !important; }Thanks,
Rikardok that is part of the answer now how about adding some padding to the left side of the logo and the right side of nav menu like the screenshot I sent…
Thanks that works –
One question thought – what can i do so this work on mobile… It just scrunches up all funny. Is there a way to deactivate this for mobile and have a proper menu only for mobile?
Hi!
To make the Fullwidth submenu as a toggle menu in mobile version it will take a lot of customisation but you can easily make them appear as a stacked menu by using the below CSS
@media only screen and (max-width: 768px) { #top .av-subnav-menu li { clear: both; width: 100%; } #top .av-subnav-menu > li > a { background: transparent!important; } }Regards,
VinayHI There – I tried that but it look odd… and it isnt sticky….
Anyway to make this work better… anyway to hide this submenu on mobile and making another menu pop up for mobile?
Hi,
Add another full width sub menu then set the Mobile Menu Display settings to display a button. Toggle the display property of the elements by using css media queries: http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
Best regards,
IsmaelAhoy –
So I was able to hide that menu. Now I need to add another menu – The problem is I added a logo in the fullwidth submenu if you look at the thread and that messes things up…
Is there a way to add another fullwidth menu only for mobile without that logo in it? or a way to add a menu from my menu panel to only mobile?
Please advise
Hey!
Please refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ and display different elements on mobile and desktop
Cheers!
YigitAhoy Yigit –
Yeah I saw that.. is there a way to do this for a normal menu?
I see that I can add elements the issue is though that If you look in this thread we added a image to the fullwidth sub menu so if I create another fullwidth sub menu that image will be in there and I will have the same problem… Is there a way to create another fullwidth submenu without that image? or link the hide/show feature to a real menu created in the appearance/ menu dashboard are?
Hey!
You can adjust the code you have added here – https://kriesi.at/support/topic/fullwidth-submenu-questions/#post-611962 to following
Regards,
YigitHi Yigit –
Not quite what I’m asking. I need the desktop fullwidth menu to have the logo, with that code – but than need a mobile menu that is acts like a normal mobile menu…. do you understand that? If I edit that code that than the logo will not be in the fullwidth desk menu… make sense?
Is there a way to activate the main menu through the appearance/ menu dashboard area only for mobile – not for desktop?
Hi,
Not quite what I’m asking. I need the desktop fullwidth menu to have the logo, with that code – but than need a mobile menu that is acts like a normal mobile menu…. do you understand that? If I edit that code that than the logo will not be in the fullwidth desk menu… make sense?
If that is what you want then the code Yigit suggested is exactly what you needed because it will only apply the logo on desktop view.
Best regards,
IsmaelThanks That worked!
Once more thing, how do I change the roll over color of the menu items for mobile? right now they are white
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.responsive #top .main_color .av-open-submenu.av-subnav-menu > li > a:hover { color: orange; }Best regards,
YigitHi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top #wrap_all .main_color .av-menu-button-colored > a .avia-menu-text { color:gold!important; }Best regards,
VinayAhoy that didnt work either. is just turned the text of my button yellow on both mobile and desktop.
Please Advise
Hey!
Sorry about that please use the below css code instead. i have tested this code and it changes the menu link color to red on hover and button text to gold on hover.
/*Menu link on hover*/ .responsive #top .main_color .av-open-submenu.av-subnav-menu > li > a:hover { color:#FF0000!important; } /*Button text on hover*/ #top #wrap_all .main_color .av-menu-button-colored > a:hover .avia-menu-text { color:gold!important; }Best regards,
Vinay
- The topic ‘fullwidth submenu questions’ is closed to new replies.