patternhtmlMinor
Bootstrap 3 custom header
Viewed 0 times
bootstrapcustomheader
Problem
I need a second set of eyes to look at my twitter bootstrap 3 header. I would welcome some insight on the code structure and methodology as it relates to bootstrap best practices and efficiency.
`
Navbar Template for Bootstrap
#navbar-xs { min-height:35px; border-radius:0; margin-bottom:10px; border-bottom: solid thin #ddd;}
#navbar-xs .navbar-inverse .navbar-toggle { border-color: none;}
#navbar-xs .navbar-toggle { padding:0;}
#navbar-xs .navbar-brand { padding: 8px 0px; font-size: 16px; line-height: 22px; height: 30px; }
#navbar-xs h4.navbar-brand { margin: 0px; }
#navbar-xs .navbar-nav > li a { padding: 0px 10px; margin:8px 0;}
#navbar-xs .navbar-nav > li + li a { border-left:1px solid #ddd; }
#mainNav .container { margin-bottom: 12px;}
#mainNav.navbar-default { background-color: transparent; border-width: 0;}
#mainNav .nav { padding: 30px 0 0 20px;}
#mainNav .navbar-nav > li > a { padding-bottom: 10px; padding-top: 10px;}
#mainNav .navbar-brand { float: none; padding: 0; margin: 10px 0; width:250px; }
@media (max-width: 767px) {
#navbar-xs h4.navbar-brand { font-size: 14px; padding:6px 5px; }
#navbar-xs .navbar-brand { width: 280px;}
#mainNav .navbar-brand { padding:0 60px 10px; margin:0; width:100%; height: auto; }
#mainNav .nav, .navbar-collapse { padding: 0; margin:0; border-width:0;}
#mainNav .navbar-collapse .navbar-nav { background-color: #f3f3f3; border-width: 0;}
}
Place Main Tagline Goes Here -
Sub Tag Here
Company Name
-
-
-
-
1-800-555-1234
Search
-
`
Navbar Template for Bootstrap
#navbar-xs { min-height:35px; border-radius:0; margin-bottom:10px; border-bottom: solid thin #ddd;}
#navbar-xs .navbar-inverse .navbar-toggle { border-color: none;}
#navbar-xs .navbar-toggle { padding:0;}
#navbar-xs .navbar-brand { padding: 8px 0px; font-size: 16px; line-height: 22px; height: 30px; }
#navbar-xs h4.navbar-brand { margin: 0px; }
#navbar-xs .navbar-nav > li a { padding: 0px 10px; margin:8px 0;}
#navbar-xs .navbar-nav > li + li a { border-left:1px solid #ddd; }
#mainNav .container { margin-bottom: 12px;}
#mainNav.navbar-default { background-color: transparent; border-width: 0;}
#mainNav .nav { padding: 30px 0 0 20px;}
#mainNav .navbar-nav > li > a { padding-bottom: 10px; padding-top: 10px;}
#mainNav .navbar-brand { float: none; padding: 0; margin: 10px 0; width:250px; }
@media (max-width: 767px) {
#navbar-xs h4.navbar-brand { font-size: 14px; padding:6px 5px; }
#navbar-xs .navbar-brand { width: 280px;}
#mainNav .navbar-brand { padding:0 60px 10px; margin:0; width:100%; height: auto; }
#mainNav .nav, .navbar-collapse { padding: 0; margin:0; border-width:0;}
#mainNav .navbar-collapse .navbar-nav { background-color: #f3f3f3; border-width: 0;}
}
Place Main Tagline Goes Here -
Sub Tag Here
Company Name
-
-
-
-
1-800-555-1234
Search
-
Solution
- There's an "i" missing from facebook `
tag (you can
leave out the closing tags completely).
- Since you declared HTML5 doctype, avoid using
andfor icons as they have semantic meaning, useinstead.
- align=""
attribute is deprecated, use css instead.
- don't use
elements, use css instead.
- don't use
for styling purposes, use` and css instead.
Context
StackExchange Code Review Q#86624, answer score: 2
Revisions (0)
No revisions yet.