Navigation dropdown - full-width settings

Support
#1

My main reason for moving to Pro was the header creator, and I am trying to create a full-width dropdown menu on mobile but failing - http://staging.dwanedigital.co.uk/

I’m using the Navigation Dropdown and in the settings for width there is no % so you cannot set the width to 100%

I’m trying to create a dropdown menu like this

Which is essentially what is happening at the moment, but I can’t make it full-width

Sub-Menu Dropdown full-width on mobile
Header > Content Area Dropdown anchor point offset or container full width?
#2

Just bumping this as I don’t think it was seen yesterday by you guys :slight_smile:

#3

Hi Ryan,

Please try this custom css.

.x-masthead .x-mod-container {
    position: absolute;
    width: 100%;
}

.x-masthead .x-mod-container .x-anchor {
    margin-left: auto;
}

.x-masthead  .x-menu.x-menu-dropdown {
    width: 100%;
}

Hope it helps.

#4

Hi Albrecht,

Within the Header editor the menu appears like this after adding the custom CSS

Which is close but I want the menu to be full-width rather than have a margin at the side like the example

However, the point above aside (after purging caches) it appears like this on devices, so the changes don’t appear to be showing or working?

Two things:

  • I need the menu to be full-width, not have a margin around the side
  • Why is the view on the header builder not accurately reflecting the view on mobile devices? (not just the full-width dropdown but the way the logo collapses too)

I’m a little bit frustrated as all i’ve seem to have had since moving to Pro is problems one way or another with the site

#5

I’ve added this CSS for the image

@media all and (max-width: 425px) {

.x-bar .x-image {

max-width: 200px !important;
}

@media all and (max-width: 325px) {

.x-bar .x-image {

max-width: 140px !important;
}

But surely with the image width being auto and a max-width being set it should auto scale? Or are these media enquiries necessary??

#6

Hello Ryan,

Your custom css is incorrect. Please have it updated:

@media all and (max-width: 425px) {
	.x-bar .x-image {
		max-width: 200px !important;
	}
}

@media all and (max-width: 325px) {
	.x-bar .x-image {
		max-width: 140px !important;
	}
}

To make sure that the dropdown is 100%, the bar width should also be 100% as well. You must remove the outer spacing of the bar for smaller screens.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

#7

Hi Ruenel,

Thanks for the above, how would I target the outer spacing within the CSS as I’ll add it to my media enquiry to only occur on certain screen sizes

Also would you suggest just using margin-left and margin-right to add space to the image and toggle like I have done so already?

EDIT:

I have added this CSS after some digging which appears to work but I just want to check it’s targeting the correct thing

@media all and (min-width: 979px) {

.e272-1.x-bar-outer-spacers:before, .e272-1.x-bar-outer-spacers:after {

flex-basis: 2em !important;
}

}
#8

In addition,

It looks as expected within the Header editor

However when viewed on the site it isn’t appearing like within the editor. I’ve cleared my browser cache, disabled W3 on my site and tried in an incognito window too

Why is it showing different to the header editor?

#9

Hey Ryan,

I moved your custom CSS from Header to child theme’s style.css file and now it’s working as expected. This could be caching issue, please clear your browser’s cache and check the site again.

Cheers!

#10

Hi Nabeel,

As I said above, I had already cleared my browser cache and it hadn’t worked. It is now working with the CSS moved to the child theme file however I don’t think this is a solution more of a workaround?

If there is custom CSS wihin the header, that should be displayed correctly both within the header editor and the live site.

The whole point of using the CSS within the header editor was to have everything all in one place rather than a bit in the style.css, a bit in global and a bit in the header editor. And to also allow me to see my CSS changes in real-time rather than go back to the style sheet every time I want to edit the header and then reload the page, check if the code has worked etc.

Why when the CSS is within the header editor section does it not display correctly?

#11

Also,

Is what I was targeting here to add space correct?

@media all and (min-width: 979px) {

.e272-1.x-bar-outer-spacers:before, .e272-1.x-bar-outer-spacers:after {

flex-basis: 2em !important;
}

}
#12

Hey Ryan,

Inserting CSS in the builder’s CSS area like Header CSS should really work both inside the preview and the frontend.

We’re sorry for the lack of details. This is a bug in the new version where if you have double space between the selectors like this:

Our auto-minification system combines them as one selector that’s why that particular CSS doesn’t work.

I removed one space in that selector and now the CSS that’s placed in the Header CSS works in the frontend as well.

Hope that helps.

#13

Answer for:

I’m sorry I’m not sure where you want to add space.

Just regarding the code suggestion. Although it works, it’s not the correct way. Before I give the reasons, I’d just like to add how that code works. It works like the Content Length option.

Below are the reasons.

  • You should not use the generated selectors like this .e272-1 because they are dynamic and could change when you edit the builder so later on, you’ll wonder why the CSS won’t work anymore.
  • The correct way is to override the builder’s output and not hack it. Here’s the correct code to be added in the Bar’s Element CSS 
@media (min-width:980px) {
  $el .x-bar-content {
    flex: 0 1 50%;
	}
}

Please watch the video below. Just slow the playback down to see the difference. There’s no narration currently because my mic’s broken.

Hope that helps.

#14

Hi Christian,

This is going to sound stupid but, where is the CSS you put back in?

Here is the header CSS area

and here is the style.css sheet within the child theme

It’s both nowhere to be seen?

I wanted to know because I was taking a look at your answer above but I don’t know where the code is…

EDIT: For some reason checking this morning the CSS code is in the header CSS, but as you see from the screenshot above it wasn’t yesterday?

#15

Hi Christian,

Fantastic reply above, thank you for explaining the reasons why my code was incorrect and would cause me hassle within the future. I really appreciate it when that is done as it helps me further my knowledge :smiley:

I’ve just got two issues with the header:

  1. My CSS for the background of the bar on mobile (it’s wrapped in a media enquiry just didn’t feel the need to put it all in) -

     .x-bar {
 background-color:rgba(1,1,1,0.5) !important;
 }

Also affects the footer, what’s the correct code to only target the header? I tried .x-bar-h but it didn’t seem to work and still affects the footer

I want my mobile menu to stay at the top of the page when scrolling down but I don’t want any transition like the desktop menu?

Currently it stays until I start scrolling then animates, however I want it to just stay at the top of the page constantly like

Whereas mine is currently

What’s the best way to go about this? Will I have to create another bar just for the mobile menu?

#16

Hello Ryan,

Thanks for updating the thread. :slight_smile:

You can either add the CSS in Element CSS panel (process mentioned by my colleague in previous step) or inspect the Bar and under Customize > Setup > Class, add a class name. After that add the CSS under Pro > Theme Options > CSS:

.header-bar {
/* Add CSS */
background-color:rgba(1,1,1,0.5) !important;
}

My suggestion would be to create a new bar for mobile view and using Hide During Breakpoint feature, let it display only on mobile devices. Same login applies for the bar that will display on Desktop Screens. Current Bar will only display on Desktop screens and using Hide During breakpoint, you can define the rule to display only on Desktop.

Thanks.

#17

Hi Prasant,

If I’m using another bar then my question in regards to that particular CSS is moot. However I still need to know what to target specifically for the header as I use

.x-bar .x-image {
margin-left: 1em !important;
 }

But that will also affect the image in the footer, what’s the correct CSS target for just the header?

Thanks

Ryan

#18

Hello Ryan,

Thanks for updating the thread.

In previous thread I have shared the solution that you can consider so that the changes get reflected only on header. First option is to add the CSS in Element CSS editor and another option is to use the CSS class option.

Usually I prefer to add CSS class and then add the CSS into theme options panel as my CSS are in one place and it becomes easier to make the changes.

Thanks.

#19

Hi Prasant,

So I used the CSS class suggestion

@media screen and (max-width: 325px) {  

headerclass .x-bar .x-image {
max-width: 140px !important;
margin-left: 1em !important;
     }
}

However this didn’t work. I had to remove .x-bar within the above to get the CSS to work. How come this is the case?

#20

Hi Ryan,

.headerclass .x-bar .x-image is not working because headerclass and x-bar are classes of the same div.
It should not be separated if it’s in the same html tag, so it should be .headerclass.x-bar .x-image.

Hope it helps.