Navbar添加Logo后右侧Tabs消失问题排查求助

我帮你排查了代码里的问题，导致右侧Tabs消失的原因主要有两个：

1. Navbar固定高度+溢出隐藏的冲突
   你给<nav>标签设置了固定高度height: 65px，同时自定义的.navbar样式里加了overflow: hidden。当Logo加入后，右侧的导航项被挤到了navbar的高度范围之外，直接被overflow: hidden隐藏了。

2. Logo尺寸设置不合理
   你给Logo设置的width: 10%是相对于父元素.navbar-header的，但.navbar-header在Bootstrap布局中是自适应宽度的，这个百分比设置会让Logo占据过多水平空间，进一步挤占右侧导航的位置，最终导致导航项被挤到 navbar 外部。

解决办法 #

这里给你调整后的代码，同时修复了一些不规范的地方：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <link href="animate.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rancho&effect=outline">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rancho&effect=ice">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>Rendered-Homepage</title>
    <style>
        /* 避免直接覆盖Bootstrap的.navbar默认样式，改用自定义类或更精准的选择器 */
        .custom-navbar {
            background-color: #ffffff;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 999;
            /* 移除固定高度，让Navbar自适应内部元素高度 */
            /* height: 65px; */
            /* 移除overflow:hidden，避免隐藏溢出的导航项 */
            /* overflow: hidden; */
        }
        .custom-navbar .navbar-nav {
            font: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', 'sans-serif';
            text-transform: uppercase;
            font-size: 15px;
            color: black;
            margin-top: 5px;
        }
        .custom-navbar .navbar-brand {
            padding: 0; /* 去掉默认padding，方便Logo居中 */
        }
        .custom-logo {
            height: 55px; /* 设置Logo高度，适配Navbar默认高度 */
            width: auto; /* 自动按比例缩放宽度 */
            margin: 5px 15px; /* 调整边距，避免和导航项太挤 */
        }
    </style>
</head>
<body>
    <div class="Rendered">
        <!--Navigation Bar-->
        <div class="Navigation">
            <nav class="navbar custom-navbar" style="margin-bottom: 0px;">
                <div class="container-fluid">
                    <!--Rendered - Logo-->
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <img src="Images/Rendered-Logo-(Version-2).png" alt="Rendered-Logo" class="custom-logo">
                        </a>
                    </div>
                    <!--Navigation Bar Tabs-->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Courses</a></li> <!-- 修正拼写错误：Couses → Courses -->
                        <li><a href="#">Community</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</body>
</html>

关键修改点说明： #

• 移除了Navbar的固定高度和overflow: hidden设置，让Navbar自适应内部元素高度，避免隐藏导航项。
• 给Logo单独设置了固定高度55px，并让宽度自动缩放，确保它不会挤占过多空间，同时在Navbar内垂直居中。
• 把自定义样式整合到custom-navbar类里，避免直接覆盖Bootstrap的默认样式，减少布局冲突。
• 修正了你导航项里的拼写错误（Couses → Courses）。

这样修改后，Logo和右侧的Tabs就能正常共存并正确对齐了。

内容的提问来源于stack exchange，提问作者Satanshu Mishra