Edycja CSS - Header - Strona Internetowa

Question

Witam serdecznie,

Jestem początkujący w programowaniu i tworzeniu stron, dlatego zwracam się do Was o pomoc.

Mam szablon, który edytuje na potrzeby nauki css. Wiem jak już manipulować kolorystyką w takim szablonie. Strona jest oparta na silniku Wordpress oraz szablon używa Cherry Framework. Mam kłopot z edycją headera i paska z menu. Chce dokonać następujących modyfikacji.

1# - Zwiększyć marginesy dla loga, żebym mógł je zwiększyć, mogę też rozszerzyć ten pasek, ale... Obecnie jak daje większe logo, to pasek automatycznie się rozszerza, ale nie menu, wtedy powstaje odstęp w dolnej części. Jak to rozwiązać? Nie mogę odszukać fragmentów kodu CSS  za to odpowiedzialnych

2# - Usunąć Tytuł podstrony z lewej, a zostawić to co jest z prawej, i tą część przenieść na lewą stronę.

3# - Dodać kolorową linię między paskiem z menu i logo, a paskiem z aktualnym położeniem (tytułem podstrony)

Do postu dołączam zrzuty ekranu, z objaśnieniami, oraz kod CSS z pliku "main-style.css"

Pozdrawiam

Cały kod z pliku main-style.css:

http://wklej.org/id/2920187/

Screen 1:

 

 

 

 

 

 

 

Screen 2:

 

Answer 1

Rozwiązanie do pytania #1

W CSS:

.header_block_2 - odpowiada za cały pasek szary nawigacyjny
nav - odpowiada za nawigację
.header .logo - odpowiada za logo

Jak zwiększysz marginesy dla .header .logo to aby wyrównać nav do loga musisz dodać tam np.

nav {
    margin: 30px 0; /* 30 jest przykładem */
}

Rozwiązanie do pytania #2

Aby rozwiązac ten problem trzeba dostać się do plików .php i odszukać linie, które odpowiadają za tytuł strony i obecną lokalizacje.

Za tytuł strony:
 

<h1 class="title-header">
    ...
</h1>

Za obecną lokalizację:
 

<ul class="breadcrumb breadcrumb__t">
    <li><a href="#adres">...</a>
    </li>
    <li class="divider"></li>
    <li class="active">...</li>
</ul>

Rozwiązanie do pytania #3

.header {
    border-bottom: 2px solid red;
}

 

Comments

Możesz przez height: 100px;

---

Nadal nic, odnośnie menu. To cały fragment, w którym manipulowałem wyglądem menu.

.header .nav__primary .sf-menu { border-left:1px solid #F2F2F2; } /* Podziałka w menu */
.header .nav__primary .sf-menu ul {
	background:#333;
	width:140px;
	padding:24px 20px 27px 20px;
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3);
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.3);
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	text-align:left;
}
.header .nav__primary .sf-menu > li {
	background:none;
	border-right:1px solid #F2F2F2; /* Podziałka w menu */
}
.header .nav__primary .sf-menu > li > a {
	position:relative;
	padding:25px 28px 25px 28px; /* szerokość menu */
	border:none;
	text-transform:uppercase;
	text-decoration:none;
	color: #333333; /* Menu - koloro tekstu */
	background:#F2F2F2; /* Menu - kolor tła */
}
@media (min-width: 768px) and (max-width: 979px) {
	.header .nav__primary .sf-menu > li > a {
		padding-right:15px;
		padding-left:15px;
	}
}
.header .nav__primary .sf-menu > li > a:before {
	background:#BFBFBF; /*Menu Wybrane- 1*/
	display:block;
	position:absolute;
	top:100%;
	right:0;
	bottom:0;
	left:0;
	-webkit-transition:0.8s;
	-moz-transition:0.8s;
	-o-transition:0.8s;
	transition:0.8s;
	z-index:-1;
	content:'';
}
.header .nav__primary .sf-menu > li li {
	background:none;
	margin:14px 0 0 0;
}
.header .nav__primary .sf-menu > li li:first-child { margin:0; }
.header .nav__primary .sf-menu > li li a {
	padding:0 0 0 0;
	border:none;
	line-height:18px;
	font-size:12px;
	font-weight:300;
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;
}
.header .nav__primary .sf-menu > li li .sf-sub-indicator {
	top:50%;
	right:-12px;
	margin:-5px 0 0 0;
}
.header .nav__primary ul.sf-menu li li:hover ul, .header .nav__primary ul.sf-menu li li.sfHover ul {
	top:-24px;
	left:165px;
}
@media (min-width: 768px) and (max-width: 979px) {
	.header .nav__primary ul.sf-menu li li:hover ul, .header .nav__primary ul.sf-menu li li.sfHover ul {
		right:165px;
		left:auto;
	}
}
.header .nav__primary .sf-menu > li > a:hover, .header .nav__primary .sf-menu > li.sfHover> a, .header .nav__primary .sf-menu > li.current-menu-item > a, .header .nav__primary .sf-menu > li.current_page_item > a { background:none; }
.header .nav__primary .sf-menu > li > a:hover:before, .header .nav__primary .sf-menu > li.sfHover> a:before, .header .nav__primary .sf-menu > li.current-menu-item > a:before, .header .nav__primary .sf-menu > li.current_page_item > a:before {
	top:0;
	-webkit-transition:0.4s;
	-moz-transition:0.4s;
	-o-transition:0.4s;
	transition:0.4s;
}
.header .nav__primary .sf-menu li li > a:hover, .header .nav__primary .sf-menu li li.sfHover > a, .header .nav__primary .sf-menu li li.current-menu-item > a, .header .nav__primary .sf-menu li li.current_page_item > a {
	background:none;
	color:#ea202e; /* Submenu - kolor po najechaniu */
}
.header .nav__primary .sf-sub-indicator {
	top:47px;
	right:50%;
	margin:0 -5px 0 0;
}

Oraz zrzut ekranu jak to teraz wygląda, nadal jest odstęp:

---

Spróbuj tak:

.header .nav__primary .sf-menu > li > a {
    padding:35px 28px 35px 28px; /* szerokość menu */
}

 

---

Dziękuję, już wszystko działa jak należy. Bardzo mi pomogłeś. Pozdrawiam.

---

W razie problemów pisz na PW.

Answer 2

Wyślij kod html to może coś poradzimy

Comments

Dziękuję za szybką odpowiedź. Oto cały kod html:

Strona Główna - http://wklej.org/id/2920298/

Podstrona - http://wklej.org/id/2920310/