После замены ссылки nav на link_to в rails, я больше не могу ориентироваться на бренд navbar в css.что я делаю не так?
Я пытался поместить его в div и дать ему идентификатор, но безуспешно
Добавление идентификатора в рельсы, как я сделал для ссылки About, будет нацелено на панель навигации-бренд, но затем он перемещает логотип и бренд navbar в верхнюю часть панели навигации без рамки или отступов вверху
<!DOCTYPE html>
<html>
<head>
<title>Saasapp</title>
<%= csrf_meta_tags %>
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" id="navbar" role="navigation">
<div class='container'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-brand">
<%= link_to root_path, class: "navbar-brand" do %>
<i class="fa fa-group"></i>DevMatch
<% end %>
</div>
</div>
<div class="collapse navbar-collapse" id="main-nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "About" , about_path, {id: 'about' } %></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<%= yield %>
</body>
</html>
Также это вопрос CSS, я пытаюсь изменитьцвет бренда и логотипа navbar:
//Background gradient
.home-callout, .navbar {
background: #5433FF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #A5FECB, #20BDFF, #5433FF); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #A5FECB, #20BDFF, #5433FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
// Home-page Styles
.home-callout {
color: #00264d;
margin-top: -20px;
padding-top: 50px;
padding-bottom: 100px;
}
//Nav Styles
* {
margin: 0;
border: 0;
padding: 0;
}
#navbar {
border: 0;
}
.navbar-brand {
color: #661aff;
&:hover{
opacity: 0.75;
}
}
#about {
color: #99ffff;
&:hover{
opacity: 0.75;
}
}
@import 'bootstrap-sprockets';
@import 'bootstrap';
//Typography Styles
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
}
@import 'font-awesome-sprockets';
@import 'font-awesome';