Why is dropdown menu so wide?

PS This is what I’ve added in Theme Options/Advanced Settings – does pasting CSS here mean I don’t need a child theme, or do you always need to create a child theme if you’re going to add CSS via the built-in Theme Options like this?

.page .page-header {
display: none;
}

@media (min-width: 992px){
.kad-header-left {width:25%;}
.kad-header-right {width:75%;}
}

.sf-menu a {
padding: 10px 10px;
}

Hey,
You can change with css like this:

.sf-menu ul,
.sf-menu li:hover ul,
.sf-menu li.sfHover ul  {
    width: 150px;
}

Kadence Themes

Hi there, thanks for the quick response. I’m surprised about that code tho’ – would a fixed width not cause problems re. responsiveness/mobile viewing etc? I assumed I’d somehow broken the normal width on the secondary menu – I thought perhaps the correct/default setting was to fit it to the longest item?

As long as it looks good, then you should be fine. Let me know if the CSS makes anything look odd in mobile and I’ll help you fix it.

-Kevin

Hi Kevin, great, thanks. I’ve just checked mobile display – and I don’t see the menu at all! On iOS or Android. :/ Any idea on why? Thanks for your help!

Can you confirm that you’ve assigned a mobile navigation in Appearance> Menus?

-Kevin

Ehh, nope..! Sorry, I’m an eejit – I’d checked the ‘theme options’ (Submenu items collapse until opened). Have now checked ‘Mobile Navigation’, and it shows up with ‘Menu’ on the left-hand side of a coloured row beneath my logo/strapline, and the three-horizontal-line icon denoting a menu on the right-hand side. Is this changeable/a theme thing? I’d like to just show the three-horizontal-line icon alongside my logo – the way it displays on mobile for https://www.briantracy.com, for example.

I’m currently only seeing the 3 lines indicating a dropdown for your mobile menu.

Were you able to figure this out?

-Kevin

Hi Kevin, very sorry for the delay – was on a last-minute trip back home and am only getting caught up now. I still see ‘Menu’ and then the three lines, on a grey-background row underneath my logo and tagline, on both iOS and Android. Anything I can do to get rid of that/move the ‘three lines’ to the top? Thanks!

Ah sorry I misread your post and was looking at the wrong site. There are actually not options within the free theme to get rid of the menu text. Within the premium theme you can do this quite easily though.

There may be a plugin that allows for this, but I’m not sure. Sorry.

-Kevin

Ah cool, thanks all the same! I may upgrade to premium once I’ve spent some more time with the free theme.

As to my other question, can you clarify if pasting CSS in the Theme Options/Advanced Settings means you don’t need a child theme, or if you always need to create a child theme if you’re going to add CSS via the built-in Theme Options?

Sorry, I must’ve missed that.

The Theme included CSS area will retain your CSS no matter what. No child theme necessary. ??

If you change any of the theme files directly, this is when you’ll want to use a child theme.
-Kevin

Superb, thank-you! ??

(Marking as resolved.)