Support ForumNavigation below header / logo area defaults to mobile – Support Forum

Navigation below header / logo area defaults to mobile

eupsychia1122 — Thu, 30 Apr 2015 16:48:45 +0000

Hey Guys,

Great theme, but one problem. The navigation defaults to mobile view.

https://www.eupsychia.com/breathwork – sometimes the menu is not mobile, but 99% it is. When refreshing the page you can see it blink in the proper place for a moment and then it jumps back into mobile.

—-

Reply To: Navigation below header / logo area defaults to mobile

IshYoBoy — Mon, 04 May 2015 09:34:43 +0000

Hey there,

Sorry for the longer reply time. We had holidays on Friday.

The menu defaults to mobile as there are too many items on the first level of the navigation. They cannot fit next to the logo and Tagline which are huge! There is space left for only 1-2 items.

Maybe remove the Tagline or hide it via CSS, set the logo to smaller width and decrease the length of the items in the first level of the navigation.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Navigation below header / logo area defaults to mobile

eupsychia1122 — Mon, 04 May 2015 15:52:02 +0000

Thank you for the reply.

If possible, I’d like to make it so that the STYLE=”DISPLAY:NONE;” can be removed. When I remove that with Inspect Element, the navigation displays.

Please let me know which file I can edit to get this result of removing the display:none

<nav class="ish-ph-main_nav">
<ul id="mainnav" class="ish-ph-mn-main_nav ish-nt-regular" style="display: none;">

1 2	<nav class="ish-ph-main_nav"> <ul id="mainnav" class="ish-ph-mn-main_nav ish-nt-regular" style="display: none;">

Reply To: Navigation below header / logo area defaults to mobile

IshYoBoy — Tue, 05 May 2015 05:28:16 +0000

Hey,

The mentioned part is added automatically using javascript which checks how much space there is left for the navigation and if not enough it changes it to “mobile” one.

You can use custom CSS and use “!important” to override it:

E.g.

.ish-ph-main_nav > ul{
	display: block !important;
}

.ish-ph-main_nav > ul{

display: block !important;

}

To hide it again then use:

.ish-ph-main_nav > ul{
	display: none !important;
}

.ish-ph-main_nav > ul{

display: none !important;

}

Of course these codes should be added in media queries (at least the second one) to target the right screen size when the change should happen.

More about media queries:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://css-tricks.com/logic-in-media-queries/

Cheer

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Navigation below header / logo area defaults to mobile

eupsychia1122 — Tue, 05 May 2015 17:08:43 +0000

Thank you for your excellent customer service and support.

I have been able to begin to integrate the desired changes to the menu system.
Still tweaking the @media queries to get them just right. :)

You are a 5 star organization. A 5 star rating is always a great motivation for us! DONE.

Reply To: Navigation below header / logo area defaults to mobile

IshYoBoy — Wed, 06 May 2015 08:29:24 +0000

Hey,

THANK YOU! It really is great to get such a response! We’re very glad that our answer helped and maybe you even learned something new ;)

Have fun with your new template, buddy!

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market