Изменение цвета текста на навигационной панели с помощью Materialize CSS (rails)

Question

Изменение цвета текста на навигационной панели с помощью Materialize CSS (rails)

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

Вещи, которые я пробовал:

- добавление класса "черный текст" на Ли теги, тег ул, окружающие теги div и Навь

- определение класса в моем приложении.scss-файл для каждого тега li.

- добавление li, nav, a { color: black;} в мое приложение.scss файл

Вот html для навигационной панели:

  <header class="nav">

    <nav>

      <div class="nav-wrapper white">

        <a href="/" class="brand-logo black-text">GlobalPursuit</a>

        <ul id="nav-mobile" class="right hide-on-med-and-down">

          <li><%= link_to "Pursuits", pursuits_path %></li>

          <li><%= join_dashboard_path %></li>

          <li><%= login_logout_path %></li>

          <li><%= trips_cart_display %></li>

        </ul>

      </div>

    </nav>

  </header>

631 3

html css materialize

3 ответов:

Comments

Ничего не найдено.

MBahamondes · Accepted Answer · 2015-11-17 15:05:22

Попробуйте это с rails, я работал на себя, так что если вы измените стиль. смотрите полностью страницу.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
  
<style>    
nav ul li a{
  color: black;
}    
</style>
</head>

<body>
<header class="top-nav">

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper white black-text">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
</div>

</header>
<main></main>
<footer></footer>
</body>
</html>

Edwin Carra · Accepted Answer · 2016-05-07 08:14:43

Поскольку добавление изменения стиля в html будет работать, я бы рекомендовал оставаться в рамках materializecss, который вы выбрали.
<div class="nav-wrapper"></div>
По умолчанию этот цвет фона панели навигации розовый, но просто добавьте один из встроенных цветов/оттенков, и вы получите очень классные эффекты.
<div class="nav-wrapper blue lighten-1></div>
Теперь моя навигационная панель имеет светло-синий цвет фона. То же самое относится и к тексту.
<div class="card-panel">
      <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>
Это приведет к созданию панели карт с синим текстом. Надеюсь, это поможет.

Ответ на основе http://materializecss.com/color.html

score 1 · Accepted Answer · 2016-01-21 08:26:20

Попробуйте это на марке, чтобы иметь черный текст:
<a href="#" class="brand-logo black-text">Logo</a>