Changes to mobile view header and menu

I need a little help with my header and menus on the original X Theme, but with the mobile phone only view.

I have it setup roughly how I want to display our charity site on the mobile device view but if you can help with two areas that would be appreciated.

1 – I can’t seem to find the right CSS to centralise the top bar menu links on the mobile view only? As you can see they are left aligned and looks a bit strange that way on mobile.
2 – With the hamburger menu icon, I would like to change the hamburger icon to a cross icon when the menu is open (i.e. press it to close the menu).
3 - I would like to change the search field to a search icon that when pressed (like the menu) opens up a the search text field and search button, rather than as it displays by default in the topbar at present (I set the CSS code to display none because it is at the top of the topbar position wise so messes the menu links)

Thanks, Ashley.

1 Like

Hey Ashley,

All three items you listed would require custom development which is outside the scope of our support. I could give you some guidance but it would be best to consult with a web developer for this. Alternatively, you might want to use Pro. All these are possible without custom coding.

  1. This would require custom media query. Please see https://www.w3schools.com/css/css_rwd_mediaqueries.asp to learn how to use media queries. The Topbar has a class of x-topbar so you can use that selector to modify it and also target the elements inside it.

  2. The mobile nav button has a class of x-btn-navbar when opened and x-btn-navbar collapsed when closed. Inside it is the icon which has a class of .x-icon-bars. To achieve this, you will need to utilize the classes and pseudo selectors not and before.

  3. This is quite complex so you’ll need to consult with a developer.

Thanks.

Thanks Christian,

I did look at using Pro, but correct me if I am wrong the problem with Pro is that I am limited with the main navigation menu? I can’t create a dropdown menu with two columns of links (like a mega menu)?

Ashley

Yes, there’s currently no megamenu element. For that, you’ll need to use UberMenu. For more details about UberMenu, please see https://theme.co/apex/forum/t/extension-ubermenu/75

Thanks.

Thank you for your help Christian,

One final question (sorry if this covered somewhere else). In Pro, are all the shortcodes and page elements and features that you offer in X Theme available in Pro too?

Yes. The only difference in X and Pro are the Header and Footer builders and the demo import is not available in Pro.

Thanks.

Hi Christian,

I am playing with Pro on another domain and trying to replicate the layout I created from X Theme. I am still working with the menu with ubermenu. I installed ubermenu via your Pro ACP, and I setup a menu with ubermenu which more or less works fine how I want it.

But when I go into Pro Headers and create my own header, I select navigation inline, change the default menu to the main primary menu where I have the ubermenu selected and it behaves like a standard menu, not a ubermenu. Is there a setting I need to activate within Pro headers for ubermenu to be respected? If that’s not clear I can show screenshots.

Hi there,

You should add text element with Ubermenu shortcode :slight_smile:

Please check this http://sevenspark.com/docs/ubermenu-3/integration/shortcode

Ubermenu is not directly integrated to Pro header yet because, with the header builder, you can add menus with no limits, and it’s not recommended to automatically integrate Ubermenu to all existing menu.

Thanks!

Thank you, I have this working now. The submenu is 100% across the container but I can’t seem to get the top level menu items to justify-content across 100% of the header container, so there is an equal amount of space between items (similar the native menu just above the ubermenu). What CSS class would I need to address this?

Thanks.

What is your menu item layout? Please refer to http://sevenspark.com/docs/ubermenu-3/layouts/menu-item to see what I mean.

Thanks.

Thanks Christian,

That’s led me in the right direction, I just need that little CSS tweak I think. I had it on automatic, but I tinkered and changing to 1/5 (for five menu items) does take the full 100% width but doesn’t allow margin space. So I changed each top level menu item to 1/6 and that creates this CSS and added a 5% margin within ubermenu.

.ubermenu.ubermenu-main .ubermenu-item-level-0 {
margin: 5px;
}

.ubermenu .ubermenu-nav .ubermenu-column-1-6 {
width: 16.66%;
}

I can tweak the width settings to make each menu item slightly bigger (around 19%) by adding this custom CSS

.ubermenu .ubermenu-nav .ubermenu-column-1-6 {
width: 19%;
}

But I can’t seem to control the margin with CSS to ensure the first and last menu items are at the far left/right of the container, so the only margin appears between the rest of the menu links. I tried adding

justify-content: space-between;

But that doesn’t work, any suggestions?

Strangely the sub-menu is perfectly 100% across the container. I just want the top left to be across the 100% width of the container, with space between menu items.

I think I have worked it out (happy for suggestions to improve. Adding the following custom CSS seems to be working.

.ubermenu .ubermenu-nav .ubermenu-column-1-6 {
width: 18%;
}

.ubermenu.ubermenu-main .ubermenu-item-level-0 {
margin: 1.25%;
}

ul#ubermenu-nav-main-2-primary>li:first-child {
margin-left: 0;
}

ul#ubermenu-nav-main-2-primary>li:last-child {
margin-right: 0;
}

The only issue I have is that the text is wrapping on the button on smaller screens. Is it possible to create a range of font size for desktops, so it automatically reduces the ubermenu font size for smaller screens?

Regretfully, there is no responsive text option in UberMenu. That would require custom media queries which is outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thanks.