28112 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

En premier : un grand merci à tous les contributeurs. Je passe beaucoup d'heures à tous vous lire et trouve souvent de très bons conseils sur ce site. J'espère que quelqu'un saura m'aider aujourd'hui !

Voici mon problème : je cherche a ENLEVER la fonction sticky (donc à défixer mon menu+mon logo) de mon thème wordpress. (oui je sais normalement c'est dans l'autre sens...!)

J'ai essayé d'enlever des .is-sticky un peu partout, d'enlever les positions : fixed... Mais rien n'y fait !

Voici quelques infos :
Version de WP : 4.9.5
Thème actif : Idyllic

La partie du CSS que je pense qu'il faut modifier (pardon c'est hyper long mais je ne sais pas du tout ce que je peux enlever ou non pour votre compréhesion Smiley ohwell )
D'avance, un immense MERCI à ceux qui voudront/pourront m'aider !


/* 15.0 Header Section
================================================== */
/* ----- Top Header Bar ----- */

#page.side-content-open .top-header,
#page.side-content-open .sticky-wrapper,
#page.side-content-open .main-slider,
#page.side-content-open .site-content {
	-webkit-transition: -webkit-transform .35s;
	transition: transform .35s;
}

#page.side-content-open .top-header,
#page.side-content-open .sticky-wrapper,
#page.side-content-open .main-slider,
#page.side-content-open .site-content {
	-webkit-transform: translate3d(-12em,0,0);
	-moz-transform: translate3d(-12em,0,0);
	-ms-transform: translate3d(-12em,0,0);
	-o-transform: translate3d(-12em,0,0);
	transform: translate3d(-12em,0,0);
}

.side-menu-wrap {
	position: relative;
	clear: both;
}

.side-menu {
	background-color: #fff;
	-webkit-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.20);
	-moz-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.20);
	box-shadow: 0 0px 3px rgba(0, 0, 0, 0.20);
	z-index: 9999;
	margin-right: -14px;
	position: fixed;
	right: -100%;
	height: 100%;
	max-width: 400px;
	padding: 50px 50px 0;
	top: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	overflow-y: scroll;
}
	
.side-menu.show {
	right: 0;
}

.admin-bar .side-menu {
	top: 30px;
}

.side-nav-wrap {
	padding-bottom: 30px;
}

.side-widget-tray {
	display: inline-block;
	width: 100%;
}

.page-overlay.side-menu-open {
	visibility: visible;
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

.page-overlay {
	position: fixed;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(34, 34, 34, 0.6);
	cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E"),pointer;
	z-index: 999;
	visibility: hidden;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
	-webkit-transition: all .4s cubic-bezier(.075,.82,.165,1),opacity 250ms;
	-moz-transition: all .4s cubic-bezier(.075,.82,.165,1),opacity 250ms;
	-o-transition: all .4s cubic-bezier(.075,.82,.165,1),opacity 250ms;
	transition: all .4s cubic-bezier(.075,.82,.165,1),opacity 250ms;
}

.show-menu-toggle {
	cursor: pointer;
	display: block;
	padding: 10px;
	position: absolute;
	right: 0;
	top: 18px;
}

.show-menu-toggle .sn-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.show-menu-toggle .bars:after, 
.show-menu-toggle .bars:before {
	background-color: #000;
	position: absolute;
	content: '';
	display: inline-block;
	height: 2px;
	-webkit-transition: all ease .3s;
	-moz-transition: all ease .3s;
	-o-transition: all ease .3s;
	-ms-transition: all ease .3s;
	transition: all ease .3s;
	outline: 1px solid transparent;
	right: 0;
}

.show-menu-toggle .bars:after {
	width: 25px;
	top: 7px;
}

.show-menu-toggle .bars:before {
	width: 35px;
	top: -7px;
}

.show-menu-toggle .bars {
	background-color: #000;
	display: inline-block;
	width: 20px;
	height: 2px;
	position: relative;
	top: -10px;
	vertical-align: bottom;
	-webkit-transition: all 500ms ease 0s;
	-moz-transition: all 500ms ease 0s;
	-o-transition: all 500ms ease 0s;
	-ms-transition: all 500ms ease 0s;
	transition: all 500ms ease 0s;
}

.show-menu-toggle:hover .bars:after,
.show-menu-toggle:hover .bars {
	width: 35px;
}

.hide-menu-toggle {
	cursor: pointer;
	padding: 8px 20px;
	position: absolute;
	left: 15px;
	top: 10px;
}

.hide-menu-toggle .bars:after, 
.hide-menu-toggle .bars:before {
	background-color: #999;
	position: absolute;
	content: '';
	display: inline-block;
	width: 25px;
	height: 2px;
	-webkit-transition: all ease .3s;
	-moz-transition: all ease .3s;
	-o-transition: all ease .3s;
	-ms-transition: all ease .3s;
	transition: all ease .3s;
	outline: 1px solid transparent;
	left: 0;
}

.hide-menu-toggle .bars:after {
	top: 0;
	-webkit-transform: translateX(-50%) rotate(-45deg);
	-moz-transform: translateX(-50%) rotate(-45deg);
	-ms-transform: translateX(-50%) rotate(-45deg);
	-o-transform: translateX(-50%) rotate(-45deg);
	transform: translateX(-50%) rotate(-45deg);
}

.hide-menu-toggle .bars:before {
	top: 0;
	-webkit-transform: translateX(-50%) rotate(45deg);
	-moz-transform: translateX(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) rotate(45deg);
	-o-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

.hide-menu-toggle .bars {
	display: inline-block;
	position: relative;
	top: -10px;
	vertical-align: bottom;
}

.side-menu-wrap .side-nav-wrap a {
	color: #000;
	display: block;
	font-family: "Arimo",sans-serif;
	font-size: 24px;
	line-height: 34px;
	text-align: right;
}

.side-menu-wrap .side-nav-wrap a:hover {
	color: #ff4530;
}

.side-menu-wrap .side-nav-wrap ul li ul li a {
	font-size: 18px;
	line-height: 42px;
}

.side-menu-wrap .side-nav-wrap ul li ul li ul li a {
	font-size: 14px;
	line-height: 36px;
}

.side-menu .social-links {
	margin-bottom: 40px;
}

.header-wrap {
	position: relative;
	display: block;
	clear: both;
}

.top-bar {
	margin: 0;
}

.top-bar .widget_contact {
	float: left;
	margin: 0;
}

.top-bar .widget_contact ul li {
	display: inline-block;
	margin-right: 10px;
}

.top-bar .widget_contact ul li a {
	color: #747474;
	font-size: 13px;
}

.top-header {
	text-align: center;
	background-position: center center;
	background-size: cover;
}

#sticky-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	-webkit-transition: all 300ms ease-out 0s;
	-moz-transition: all 300ms ease-out 0s;
	-o-transition: all 300ms ease-out 0s;
	-ms-transition: all 300ms ease-out 0s;
	transition: all 300ms ease-out 0s;
	width: 100%;
	z-index: 999;
}

.is-sticky #sticky-header {
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border-bottom: none;
}

.is-sticky .main-header {
	border-bottom: none;
}

@media only screen and (max-width: 767px) {
	.is-sticky #sticky-header {
		background-color: #fff;
	}
}

.boxed-layout #sticky-header,
.boxed-layout-small #sticky-header {
	width: inherit;
}
Bonjour.

Avec (entre autres), l'Inspecteur de Firefox, tu peux savoir quels styles CSS s'appliquent à quel élément :

Firefox > menu "Hamburger" > "Développement web" > "Inspecteur"

Raccourci clavier : Ctrl + Shift + c

Bonne continuation.
Modifié par thierry (20 May 2018 - 10:26)