Bug display nav bar on smartphone

[blaouchez]

hello,
My navigation bar is perfect on display PC but not on smartphone. The sub sections overlap (see screenshot)
Regards

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Please update Flexform to version 1.62, if that does not work please activate the parent theme and let me know if you get the same issue. It’s likely something in your custom css

– Kyle

[blaouchez]

On http://cluster007.ovh.net/~montourckh/nos-actualites/publications

In overview of the headings, the text is white, it’s perfect. But if the topic of the current page you hover over, the text is black.

How to make the text be white?

Custom css :

/*--Nav : hauteur--*/
#nav-section {
    margin-top: 88px !important;
}
/*--Nav : Couleur survol--*/
nav  li:hover {
	text-decoration: none;
	background-color: #00538A!important;
}
/*--Sous-menu : mise en forme--*/
nav .menu ul li {
	font-size: 13px;
	text-align: center;
}

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

nav .menu li.current-menu-ancestor > a, nav .menu li.current-menu-item > a {
    color: #333333 !important;
}

Thanks
Mohammad

[blaouchez]

OK but the current heading “Notre équipe” disappears

In rollover, the text must be white in a blue rectangle

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide admin access. It’s faster this way.
Please use the private reply option.

-Rui

[blaouchez]

This reply has been marked as private.

[Kyle – SUPPORT]

Please can you attach another screenshot showing the remaining issue? As it seems fine to me, every link I hover over is white with a blue background

– Kyle

[blaouchez]

http://cluster007.ovh.net/~montourckh/notre-equipe

I managed to solve my problems for navigation except margin in the blue rectangles

How to add margins to the left and right ?

For information, my custom css:

#nav-section {
    margin-top: 88px!important;
}

nav li a {
	text-decoration: none;
	text-align: center;
	padding-right: 5px;
	padding-left: 5px;
	display: block!important;
}
nav li a:hover {
	text-decoration: none;
	background-color: #00538A!important;
	color: #fff!important;
}

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add this:

nav .menu li a {
  margin: 0;
  padding: 12px 10px;
}

– Kyle

[blaouchez]

This is perfect except for the first item.

And smartphone, how to align the subheading in the axis of headings

Attachments:

You must be logged in to view attached files.

[blaouchez]

Sorry, I do not understand, what does it do to add margins on the first item?

[Kyle – SUPPORT]

Sorry, my previous comment was the wrong topic!

Add this:

nav .menu > li:first-child {
  padding: 2px;
}
nav .menu > li:first-child > a {
  padding-left: 10px!important;
}

– Kyle

[blaouchez]

Thank you Kyle, it works but on smartphones, how to have a perfectly centered smartphone navigation? (screenshot)

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

That’s odd, I don’t get that? (see screenshot)

– Kyle

Attachments:

You must be logged in to view attached files.