Я разрабатываю пользовательский шаблон Joomla для сайта, на котором я работаю, и дизайн очень уникален. До этого момента проект шел хорошо, но теперь у меня проблема css с панелью навигации, и я не могу на всю жизнь понять, почему я не могу это исправить. Это страница с правильной позицией навигационной панели с использованием HTML и CSS без рамки Bootstrap, которая интегрируется с Joomla.Custom Joomla Template Nav Bar Formatting Issue
Как я уже сказал, что это прекрасно. Однако, как только я добавляю bootstrap css, в итоге я получаю панель навигации, как показано ниже, и ничего не сделаю, это исправит.
Пожалуйста, обратитесь к моей index.html и custom.css файлов ниже.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-extended.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner" class="row-fluid">
<div class="span8">
<a href="/"><img src="images/site_logo.png" alt="Shamrock Tours, click for home." id="headerimage"></a>
</div>
<div class="span4">
User menu goes here.
</div>
</header>
<nav class="row-fluid">
<div class="span12">
Nav menu goes here.
</div>
</nav>
<div id="innerbody">
<aside class="row-fluid">
<div class="span4">
Sidebar goes here.
</div>
</aside>
</body>
</html>
custom.css
@charset "utf-8";
/* Main Styles for Shamrock Tours Website */
/* CSS Reset */
a,
article,
aside,
body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img {
margin: 0;
padding: 0;
}
/* General Element Styling */
html {
background: #0D8330;
}
body {
border: 5px double #000;
border-radius: 10px;
box-sizing:border-box;
font-family: "IM Fell French Canon";
background: transparent;
font-size: 1em;
}
h1,
h2,
h3 {
font-weight: bold;
}
h1 {
font-size: 2.25em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.125em;
}
/* Header */
header {
margin: 25px 25px 0;
}
#headerimage {
float: left;
width: 41%;
margin-left: 10px;
line-height: 2;
}
header h1 {
position: relative;
top: -10px;
left: 150px;
width: 500px;
text-shadow: 1px -1px #fff;
text-align: center;
}
/* Navigation */
nav {
position: relative;
top: -70px;
left: 345px;
height: 75px;
border-radius: 10px;
box-shadow: 0 4px #666;
background: rgba(8,138,43,0.9);
line-height: 2;
}
/* Content */
#innerbody {
position: relative;
top: -103px;
width: 95%;
min-height: 450px;
margin: 0 auto;
padding: 75px 15px;
border-radius: 10px;
background: #fff;
z-index: -1;
}
article {
float: right;
width: 70%;
}
article h2 {
margin: 1.05em 0;
text-shadow: 1px 1px #666;
}
article h3 {
line-height: 1.2;
}
aside {
float: left;
width: 20%;
}
/* Footer */
#footercontainer {
position: relative;
}
footer {
position: absolute;
bottom: 0;
font-size: 0.875em;
}
Любые предложения, которые вы можете предоставить на проблемы и решение было бы весьма признателен. Спасибо много!