Бренд Navbar не стилизован, а у Navbar нет цвета фона, только прозрачный - PullRequest
Новая
       21

Бренд Navbar не стилизован, а у Navbar нет цвета фона, только прозрачный

0 голосов
/ 08 января 2019

Мой Навбар не будет играть в мяч. Это почти там, но у меня есть две проблемы, которые я не могу решить.

1) При прокрутке страницы панель навигации прозрачна. Я добавил некоторые отступы в верхнюю часть для интервалов, но я не понимаю, почему это прозрачно. В моем CSS нет настроек непрозрачности!

2) Мой логотип выровнен по правому краю с navbar-brand, но независимо от того, что я делаю с CSS, я не могу изменить цвет, размер или тип текста.

3) Я также изо всех сил стараюсь, чтобы фоновое изображение заполнило всю страницу. Я пробовал все виды, чтобы привести его в соответствие, но это не будет.

Может кто-нибудь помочь с моими проблемами? Я временно разместил страницу индекса, так как чувствую, что что-то в остальной части моего css испортило мою панель навигации!

Вот ссылка ... http://www.wisbechinlinespeed.co.uk/index-new.htm

Я погуглил проблемы и попробовал большинство предложений, но, похоже, ничего не работает. 

.menu-area{background: #F9F3DB; }

.dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}

.mainmenu a,   .navbar-default
.navbar-nav > li > a, 
.mainmenu ul li a , 
.navbar-expand-lg     .navbar-nav .nav-link{color:#6D6C6B;font-size:16px;text-transform:capitalize;padding:10px 10px;font-family:'calibri',sans-serif;display: block !important;}


/*==========WISS logo==========*/
 .navbar-default 
 .navbar-brand .navbar-text {
color:#6D6C6B;}
/*==========active page properties==========*/
.mainmenu 
.active a,
.mainmenu 
.active a:focus,
.mainmenu 
.active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus ,
.navbar-default 
.navbar-nav>.show>a, 
.navbar-default 
.navbar-nav>.show>a:focus, 
.navbar-default 
.navbar-nav>.show>a:hover{background: #6D6C6B; color: #F9F3DB; outline: 0;}


/*==========Sub Menu=v==========*/

.mainmenu 
.collapse ul > li:hover > a{background: #6D6C6B;color: #F9F3DB; }

.mainmenu 
.collapse ul ul > li:hover > a, 
.navbar-default 
.navbar-nav 
.show 

.dropdown-menu > li > a:focus, 
.navbar-default 
.navbar-nav 

.show 
.dropdown-menu > li > a:hover{background: #6D6C6B;}

.mainmenu 
.collapse ul ul ul > li:hover > a{background: #6D6C6B;}


.mainmenu .collapse ul ul, 
.mainmenu .collapse ul ul
.dropdown-menu{background:#d9d9d8;}

.mainmenu 
.collapse ul ul ul, 
.mainmenu .collapse ul ul ul
.dropdown-menu{background:#d9d9d8}

.mainmenu .collapse ul ul ul ul, 
.mainmenu .collapse ul ul ul ul
.dropdown-menu{background:#d9d9d8}



/******************************Drop-down menu work on hover**********************************/

.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}


@media only screen and (min-width: 767px) {

.mainmenu 
.collapse ul li:hover> ul{display:block}

.mainmenu 
.collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}

/*******/

.mainmenu 
.collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}

.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}

/*******/

.mainmenu .collapse ul ul ul li{position:relative}

.mainmenu .collapse ul ul ul li:hover ul{display:block}

.mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}


@media only screen and (max-width: 767px) {

.navbar-nav .show .dropdown-menu 
.dropdown-menu > li > a{padding:16px 15px 16px 35px}

.navbar-nav .show .dropdown-menu 
.dropdown-menu 
.dropdown-menu > li > a{padding:16px 15px 16px 45px}
}

<!------ nav bar ---------->



<div id="menu_area" class="menu-area">

<div class="container">

<div class="row">

<nav class="navbar navbar-dark navbar-expand-lg fixed-top mainmenu">
 <a class="navbar-brand order-md-last" href="#">WISBECH INLINE SPEED</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">


<li class="active"><a href="index.htm">Home <span class="sr-only">(current)</span></a></li>

<li><a href="home.htm">News</a></li>


<li class="dropdown">

<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Club Information</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">


<li><a href="about.htm">About Us</a></li>

<li><a href="join.htm">Join Our Club</a></li>

<li><a href="stats.htm">Club Statistics</a></li>

<li><a href="calendar.htm">Calendar</a></li>

<li><a href="results.htm">Results</a></li>

<li><a href="track.htm">Track Info</a></li>

<li><a href="docs.htm">Official Documents</a></li>

<li><a href="sponsorship.htm">Sponsorship</a></li>

<li><a href="contact.htm">Contact Us</a></li>

<li><a href="links.htm">Links</a></li>

</ul>   

<li class="dropdown">

<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Meet The Team</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">


<li><a href="team.htm">The Team</a></li>

<li><a href="coaches.htm">The Coaches</a></li>

<li><a href="committee.htm">The Committee</a></li>
 </ul>

<li class="dropdown">

<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Training Tips</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">


<li><a href="nutrition.htm">Nutrition</a></li>

<li><a href="technique.htm">Technique</a></li>

<li><a href="injuries.htm">Preventing Injuries</a></li>

<li><a href="maintenance.htm">Maintenance</a></li>

<li><a href="equipment.htm">Equipment</a></li>
</ul>

<li class="dropdown">

<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Galleries</a>

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">


<li class="dropdown">

<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
                   <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a href="#">2018</a></li>

<li><a href="#">2017</a></li>

<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>


</ul>



<li><a href="#">Team Photos</a></li>

<li><a href="#">Videos</a></li>


<li class="dropdown">

<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Media</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a href="#">Press Reports</a></li>

<li><a href="#">Archives</a></li>
  </ul>


<li class="dropdown">

<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Archives</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a href="#">1980's and 90's</a></li>

<li><a href="#">2000's</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</nav>

</div>
</div>
</div>

<!------ end new nav bar ---------->

1) Прозрачный navbar, но я хочу, чтобы он был # F9F3DB 2) CSS бренда Navbar не меняет тип текста, я хочу изменить цвет, тип шрифта и размер 3) Фоновое изображение всей страницы не заполняет страницу. Я бы хотел, чтобы оно подходило ко дну.

1 Ответ

0 голосов
/ 09 января 2019

1) Для первой проблемы решение состоит в том, чтобы удалить контейнер div, контейнер строки и область меню. Я не знаю, нужны ли они, но во многих примерах начальной загрузки есть только тег nav. Пример: 

<!--Navigation Bar-->
<nav>
    <div>
        <img>
        <div>
            <a><!--Here put the logo image or text--></a>
        </div>
        <ul>
            <li><a>First</a></li>
            <li><a>Second</a></li>
            <li><a>.....</a></li>
        </ul>
    </div>
</nav>

Примеры здесь Примеры начальной загрузки Navbar

Сделано, просто установите фон в классе .mainmenu: 

.mainmenu {
background: none;
border: 0 solid;
margin: 0;
padding: 0;
min-height: 20px;
width: 100%;
background: #f9f3db; /*---background set---*/
}

2) Для этого решение легко, потому что вы используете класс navbar-dark, у которого есть цвет: белый, который берет на себя ваши правила CSS. Таким образом, вы можете сделать две вещи. Или удалить этот класс, если он бесполезен для вас, или использовать! Важный после правил CSS. Пример: 

.mainmenu a{
 color: #fff !important; 
}

3) Должно быть это решение: 

background-position: right bottom;
...