Sticky top bar

hql

How can I add a shadow which will show on all devices at the bottom of the sticky menu bar?

Phil

Hi,

Do you mean something like that?:

If yes, it can be added with a custom CSS code, placed in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Do you need help with writing it?

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

hql

Yes exactly like this please, how can i do it? Also can you help me centering the links on the main menu bar?

Phil

Please, use the following CSS code:

#Top_bar.is-sticky{
   -webkit-box-shadow: 0px 15px 30px 0px rgba(66, 68, 90, 1)!important;
 -moz-box-shadow: 0px 15px 30px 0px rgba(66, 68, 90, 1)!important;
 box-shadow: 0px 15px 30px 0px rgba(66, 68, 90, 1)!important;
}

But for centering, I will need a link to your website. Can you send a link to it, please?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

hql

Thank you, here is the link to the site: https://www.thetechbase.co.uk/

hql

https://forum.muffingroup.com/betheme/discussion/comment/214121#Comment_214121

Thank you! Also how do I make the shadow a little less subtle, by that I mean how far the shadow appears below the sticky header?

Phil

1) Please, try this one:

#menu .mega-menu-wrap{
   margin: 0 auto;
}

2) Use the following Shadow Box generator:

https://cssgenerator.pl/box-shadow-generator/

With it, you can easily customize the shadow of your need.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

hql

Thank you for you're quick response and help, just one last thing, its related to the mega menu, when we scroll down on the page and the menu toggle buttons appear on the right side and we expand the menu its appearing all weird, its fine on mobile view. I know this isnt directly related to BETHEME but if you could help me with the CSS needed to fix this that would be soo appreciated!

Phil

Please, try this:

#Side_slide .mega-sub-menu li{
   width: 100%!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

hql

Thank you so much, this has fixed the first link on the menu PHONE PARTS, how can I apply this to the whole menu? Also is there a way to put the Phone parts on the next line like it is showing on mobile view

hql

I added this CSS, is this correct???

#Side_slide #menu ul {

width: 100%!important;

display: flex;

flex-direction: column;

}

hql

Also on default wordpress theme when the mobile menu toggle is activated you have to click to expand the menu but on this theme the menu open on just hovering over the menu items, is this something we can fix?

Phil

1) Yes, the CSS you used is correct.

2) Sorry, but I quite do not understand. In our theme, you need to click on the hamburger menu, and menu items to expand them.

However, how can you hover over elements on mobile? Or do you refer to the mobile view opened on the desktop browser?

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

hql

1) Thanks

2) So yes in your theme you need to click the menu items to expand, the menu plugin I've installed also does this by default, but in this theme it is expanding the menu by hovering over the menu items, is there a way to fix this?

Phil

Sorry, but there is no setting to change that.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

hql

Ive managed to find a tutorial on the authors website for this mega menu, https://www.megamenu.com/documentation/betheme/

Am I able to create a child theme at this point also? And what about all the CSS changes ive made in the custom css options will i loose those?

Phil

Yes, you can create a child theme. You can learn more about this on the following link:

https://support.muffingroup.com/documentation/installation-updates/#child-theme

The changes you made in the theme options will not be lost, and they will stay untouched.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next