Menu & trigger points (@media)

Resolved lic-8008
(@lic-8008)

10 years ago

I have only 4 items on my main menu, and would like to show the actual menu on ‘tablet size’ (@media (min-width: 768px) instead of the mobile menu + keep the branding flush left instead of centered in 1 column. There’s plenty space for everything…

Also: 2 columns switch to 1 already at that size, a bit too early I would say. Still plenty of space to show them as-is.

At smaller sizes it’s fine to keep the mobile menu and branding centering + columns collapse.

Basically I would like to still see ‘a standard website’ at about 800px width, without already there switching to 1 column mobile mode.

Can you advice me on how to?
site page for checking: http://www.sicreaweb.com/

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter lic-8008
(@lic-8008)

10 years ago

I temporarily solved the ”columns issue” with Shortcodes Ultimate plugin, it seems.
Menu issue still to be handled.

site page now updated with shortcodes ultimate columns:
http://www.sicreaweb.com/
Theme Author Ben Ritner – Kadence WP
(@britner)

10 years ago
This should take care of the menu:
```
@media (max-width: 992px) {
    #nav-main ul.sf-menu, .nav-main ul.sf-menu, #nav-second ul.sf-menu {
    	display: block;
    }
#kad-mobile-nav, #mobile-nav-trigger {
	display: none;
	}
}
@media (max-width: 768px) {
    #nav-main ul.sf-menu, .nav-main ul.sf-menu, #nav-second ul.sf-menu {
    	display: none;
    }
#kad-mobile-nav, #mobile-nav-trigger {
	display: block;
	}
}
```
Thread Starter lic-8008
(@lic-8008)

10 years ago

Thank you for caring and responding so fast 🙂

alas: better, but we are not yet fully there – I checked both manually (resizing screen) and with screenfly (http://quirktools.com/screenfly/)

now the menu jumps down on top of the page content, hiding it.
The logo is flush left as desired but its div takes up all of the top space width (at 800px).

I usually manage well with css & Inspect Element – but here I don’t seem to find exactly where to make my changes. Hence I have to ask you, I’m sorry.

site: http://www.sicreaweb.com/
Theme Author Ben Ritner – Kadence WP
(@britner)

10 years ago
ok Yeah I see, try adding this:
```
@media (max-width: 992px) {
.kad-header-left {
float:left;
width: 33.33333333333333%;
}
.kad-header-right {
float:left;
width: 66.66666666666666%;
}
}
```
Kadence Themes
Thread Starter lic-8008
(@lic-8008)

10 years ago

**RESOLVED**
OK THIS WORKS. Thank you so much.

To help others, here’s the complete css solution. Copy / paste into child style sheet or into custom css in theme:

/* MENU CHANGE TRIGGER POINTS (@media) */
@media (max-width: 992px) {
#nav-main ul.sf-menu,
.nav-main ul.sf-menu,
#nav-second ul.sf-menu { display : block; }

#kad-mobile-nav,
#mobile-nav-trigger { display : none; }
}

@media (max-width: 768px) {
#nav-main ul.sf-menu,
.nav-main ul.sf-menu,
#nav-second ul.sf-menu { display : none; }

#kad-mobile-nav,
#mobile-nav-trigger { display : block; }
}

/* MENU FLOAT LOGO & BUTTONS */
@media (max-width: 992px) {
.kad-header-left {
float:left;
width: 33.33333333333333%;}

.kad-header-right {
float:left;
width: 66.66666666666666%;}
}

see it in action here: http://www.sicreaweb.com/

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Menu & trigger points (@media)’ is closed to new replies.

Tags