引导程序易动菜单切换背景色不起作用

时间:2020-10-02 14:54:27

标签: javascript html jquery css bootstrap-4

我试图找出为什么当我使用移动设备或将屏幕调整为小尺寸时,当您按下切换按钮时,链接出现但没有背景颜色吗?

我正在使用引导程序,对如何解决此问题有任何想法吗?

如果您想亲自看看,请访问https://www.makeyourweb.co.uk/

我脑海中的代码是:

<head>
<script data-ad-client="ca-pub-1761720526329589" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>


    <!-- Required meta tags -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="lib/typed.js" type="text/javascript"></script>
  <script src="assets/demos.js"></script>
  <link href="assets/demos.css" rel="stylesheet"/>
  <link href="assets/css/contan.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    
    <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-175922448-1"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-175922448-1');
    </script>

<meta name="description" content="We offer innovate and agile website solutions to local businesses to allow them to have a professional web presence. We offer flexible and bespoke solutions!">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="./assests/css/linearicons.css" />
    <link rel="shortcut icon" href="./assets\img\icons\favicon.ico" />
    <link rel="stylesheet" href="./assets/css/animate.css" />
    <link rel="canonical" href="https://makeyourweb.co.uk/">
    <link rel="stylesheet" href="./assets/css/price.css">
    <link rel="stylesheet" href="./assets/css/totop.css">
    <link rel="stylesheet" href="./assets/css/linearicons.css" />
    <link rel="stylesheet" href="./assets/css/magnific-popup.css" />
    <link rel="stylesheet" href="./assets/css/jquery-ui.css" />
    <link rel="stylesheet" href="./assets/css/nice-select.css" />
    <link rel="stylesheet" href="./assets/css/main.css" />
  <link href="./assets/img/icons/MetroUI_OS_Apple.png" rel="apple-touch-icon" />
  <link href="asset/demos.css" rel="stylesheet"/>
  <link href="lib/typed.js" rel="javascript">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

    
<script>

var typed3 = new Typed('#typed3', {
    strings: ['standard websites', 'premium websites', 'email accounts'],
    typeSpeed: 45,
    backSpeed: 75,
    smartBackspace: true, // this is a default
    loop: true
  });

</script>

    <title>Make Your Web | Get a website today | No hidden costs</title>
</head>

我的导航条形码是

<!-- navbar -->
<?php //include('database/connection.php')?>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-theam text-white">
        <div class="container">
            <a class="navbar-brand m-0 p-0" href="/">
                <img src="./assets/img/logos/logo.png" alt="picture" class="img-fluid" alt="">
            </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 justify-content-end" id="navbarSupportedContent">
                <ul class="navbar-nav text-uppercase ">
                    <li class="nav-item">
                        <a class="nav-link active" href="/">Home </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="/contact">Contact Us</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="https://makeyourweb.co.uk#pricing">Pricing</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="https://makeyourweb.co.uk#services">Services</a>
                      </li>
                      <li class="nav-item pl-3">
                        <a class=" btn btn-outline-warning" href="/quote">Get a quote</a>
                      </li>

                </ul>
            </div>
        </div>
    </nav>

如果您能提供帮助,那将非常感谢!

2 个答案:

答案 0 :(得分:0)

为什么不尝试在CSS中为其赋予背景色

.navbar-collapse {
    background: #444;
}

答案 1 :(得分:0)

您尝试过类似的事情吗?

public class MyBeacon extends Beacon implements Serializable, Comparable {
public String btAddress;
public String area;
public double[] position;

private static Map<String, String> btToArea = new HashMap<>();
private static Map<String, double[]> positionsMap = new HashMap<>();

static {
    btToArea.put("DE:FD:0A:11:D8:80", "DEV OFFICE");
    btToArea.put("D1:75:7B:58:54:D6", "DEV OFFICE");
    btToArea.put("D6:81:6A:D5:09:40", "CENTRAL OFFICE");
    btToArea.put("F1:14:DC:C2:0C:08", "CENTRAL OFFICE");
    btToArea.put("FC:0D:4A:C1:CD:57", "DEV OFFICE");

    positionsMap.put("D6:81:6A:D5:09:40", new double[]{9.9, 3.9}); //
    positionsMap.put("FC:0D:4A:C1:CD:57", new double[]{0.0, 0.0}); //
    positionsMap.put("D1:75:7B:58:54:D6", new double[]{0.0, 2.5}); //
    positionsMap.put("F1:14:DC:C2:0C:08", new double[]{6.9, -1.0}); //
    positionsMap.put("DE:FD:0A:11:D8:80", new double[]{-0.4, 2.5});
}

public MyBeacon(Beacon beacon){
    super(beacon);
    this.btAddress = beacon.getBluetoothAddress();
    this.area = btToArea.getOrDefault(beacon.getBluetoothAddress(), "ERROR");
    this.position = positionsMap.get(beacon.getBluetoothAddress());
}

public static MyBeacon FromBeacon(Beacon beacon){
    if (positionsMap.containsKey(beacon.getBluetoothAddress()))
        return new MyBeacon(beacon);

    return null;
}

@Override
public boolean equals(Object o) {
    if (this == o) return true;
    if (o == null || getClass() != o.getClass()) return false;
    if (!super.equals(o)) return false;
    MyBeacon myBeacon = (MyBeacon) o;
    return Objects.equals(btAddress, myBeacon.btAddress) &&
            Objects.equals(area, myBeacon.area) &&
            Arrays.equals(position, myBeacon.position);
}

@Override
public int hashCode() {
    int result = Objects.hash(super.hashCode(), btAddress, area);
    result = 31 * result + Arrays.hashCode(position);
    return result;
}

@Override
public int compareTo(Object o) {
    return (int) (((MyBeacon) o).getDistance() - this.getDistance());
}

如果需要,您可以添加div.navbar-collapse{ background: "your color"; } 来粉碎预定义的引导样式...

!important