Styling Nav bar / menu

Support
#1

Hi,

Would like some help again…

Site: https://dev.amaravati.org/about/

Would like to change the submenu here:

  1. how to change the lettertype in the submenu and sub-submenu’s? (e.g below retreat centre AND below retreat centre > bookings.

  2. how to change the background colour in the submenu and the sub-submenu?

3j) how to change the width of the submenu & sub-submenu? (question: why does it take so much space on the right?

  1. how to adjust the height/blank space between Retreat Centre and About?

  2. how to align the double arrows to the right like in mobile menu?

  1. how to change the double arrows into some other icon (for all sub menus)

  2. I might change this menu into a 2 column mega menu, hope that the above will still be valid for megamenu’s.

  3. can de 'sub-submenu in the mobile menu be ‘auto’ collapse when pressing the main menu item? (see mobile menu screenshot: when clicking About, the Monastery history’s submenu should also show it’s submenu without clicking on Monastery History)

Thanks again.

EDIT: added point 8

1 Like
#2

Hello @amaravati,

Thanks for asking. :slight_smile:

As there are multiple questions, let me answer one at a time in chronological order.

  1. With lettertype are you looking to change the font family? If yes, please add following CSS in X > Launch > Options > CSS:

.x-navbar .desktop .sub-menu li > a {font-family: Times, Times New Roman, Georgia, serif;}

In case if it doesn’t answers your question, would you mind elaborating your question?

  1. To change background color, I see that you have added a custom code to have a white background color. https://screencast.com/t/APJ9Dxldw

Please delete , .x-navbar .sub-menu from that and add following code:

.x-navbar .sub-menu {background-color: #ddd;}

  1. To change submenu width and height (retreat center and about sub menu items), please add following CSS:

.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu>.sub-menu {left: auto; right: auto;}
.sub-menu {width: 300px;}

  1. Can you please elaborate this question?

  2. To change arow to another icon, please use following CSS selector and depending on the requirement you can choose the icons:

.x-navbar .desktop .x-nav li>a>span:after{}

You can refer following resource for more information https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter

  1. Can you please elaborate last two questions as it’s bit confusing?

Thanks.

#3

Hi Theme X,

Thanks again for all your answers!

OK

  1. The area I am looking to reduce or change is this:

  1. never mind, please drop it for now.

  2. The mobile menu: when tapped, you can only see the first level. If you want the second level (sub-menu) you have to tap again to show the next level. And if there is another a level, you have to tap again. So the question, is it possible to tap once on mobile menu and show the submenu as well (without tapping twice?).

Hope this makes sense.

thanks,

#4

Hi there,

Please try this code:

    .masthead-stacked .x-navbar .desktop .sub-menu {
        top: 38px;
    }

This is the native way how the mobile menu works. You will have to tap each parent menu item for the child items to show up. You could however accomplish what you are trying to do by writing a custom JS code. Unfortunately this code is not something we could provide as this goes beyond the scope of our support since the option available out of the box works as intended.

#5

Hi,

Thanks for all that!!! I am struggling with point 3.

When I use the code suggested under point 3, the submenu does shrink in width, but then it doesn’t show it centrally anymore, it show it right under the menu level.

Here are two examples where the menu is shown ‘centrally’ covering the same width.

When I reduce the width with your code. the menu doesn’t show centrally but right under the menu we click on. Can we reduce the width but retain the ‘central’ feature?

#6

For future references:

Point 5, using CSS selector, it was not clear how to use awesome fonts icons. So I finally found something here:
Source: http://astronautweb.co/snippet/font-awesome/

.x-navbar .desktop .x-nav li>a>span:after{
content: “\f107”;
}

Then one can change (the CSS content) into any awesome font icon on that list.

#7

Hi There,

For 3, please add the following CSS to Theme Options CSS

.masthead-stacked .x-navbar .desktop .sub-menu {

    margin: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: 800px;
}

Hope it helps

#8

As always, your help is much appreciated. Thanks a lot. I incorporated most of your replies…

#9

Glad we could help.

Cheers!