-1
[! [Введите описание изображения] [1]] [1] Я загрузил предопределенный стиль навигации, и я хочу использовать его при загрузке. Поэтому в основном я хочу их смешивать, чтобы bootstrap мог использовать одни и те же классы, чтобы достигнуть css и достичь желаемого дизайна. Должен ли я перезаписывать стандартную загрузочную навигационную панель, или есть тривиальный способ?Как перезаписать bootsrap navbar, как это?
Вот html к предопределенному.
<nav class="menu menu--iris">
<ul class="menu__list">
<li><a href="#" id="fbox">FoundryBox</a></li>
<li class="menu__item menu__item--current"><a href="asdsa" class="menu__link">SELFIES</a></li>
<li class="menu__item"><a href="dasd" class="menu__link">PARTNERS</a></li>
<li class="menu__item"><a href="asdasd" class="menu__link">DATALOGISTIC</a></li>
</ul>
</nav>
Base Bootsrap:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">SELFIES</a></li>
<li><a href="#contact">PARTNERS</a></li>
<li><a href="#">DIALOGISTIC</a></li>
</ul>
</div>
</nav>
CSS:
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
background-image: url('img/fejlec.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: auto 100%;
text-align: right;
}
.menu--iris .menu__item .menu__link:nth-child(2){
float: right;
}
.menu--iris .menu__item .menu__link:nth-child(2){
float: right;
}
.menu--iris .menu__item .menu__link:nth-child(2){
float: right;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: table-cell;
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* Iris */
.menu--iris .menu__item {
margin: 0 1em;
}
.menu--iris .menu__link {
position: relative;
text-align: center;
color: #D1D1D1;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu--iris .menu__link:hover,
.menu--iris .menu__link:focus {
color: #ffb4b4;
}
.menu--iris .menu__item--current .menu__link {
color: #E32228;
}
.menu--iris .menu__link::before,
.menu--iris .menu__link::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
opacity: 0;
border: 2px solid #d94f5c;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
}
.menu--iris .menu__link::before {
top: 0;
left: 0;
border-width: 2px 0 0 2px;
-webkit-transform: translate3d(10px, 10px, 0);
transform: translate3d(10px, 10px, 0);
}
.menu--iris .menu__link::after {
right: 0;
bottom: 0;
border-width: 0 2px 2px 0;
-webkit-transform: translate3d(-10px, -10px, 0);
transform: translate3d(-10px, -10px, 0);
}
.menu--iris .menu__item--current .menu__link::before,
.menu--iris .menu__item--current .menu__link::after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
a {
text-decoration: none !important;
display:inline-block;
}
body{
background-image: url('img/selfii.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}
#fbox{
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic",
font-weight: 100px;
color: #E32228;
text-decoration: none;
font-size: 30px;
text-shadow: 1px 1px #0f0f0f;
}
С этим что-то не так. Можете ли вы сказать мне, что это? Я обновил вопрос и добавил картинку. – JustMatthew
У вас есть больше css? в моем случае он работает нормально. вы попробовали мой фрагмент кода? – neophyte
Да, но это было не все мои css. Я тоже его обновляю. Я был бы очень благодарен, если бы вы помогли мне с этим последним :) – JustMatthew