{"id":3218,"date":"2010-12-06T04:02:50","date_gmt":"2010-12-06T09:02:50","guid":{"rendered":"https:\/\/friendburst.com\/blog-new\/3218\/design-and-style-your-friendburst-profile-navigation-bar\/"},"modified":"2010-12-06T04:02:50","modified_gmt":"2010-12-06T09:02:50","slug":"design-and-style-your-friendburst-profile-navigation-bar","status":"publish","type":"post","link":"https:\/\/friendburst.com\/blog-new\/3218\/design-and-style-your-friendburst-profile-navigation-bar\/","title":{"rendered":"design and style your friendburst profile – navigation bar"},"content":{"rendered":"\n<\/col>\n<\/col>\n\n\n
\n
\n

\u2022 Introduction<\/span><\/p>\n

\u2022 Background<\/span><\/p>\n

\u2022 Top Area<\/a>
\n\u2022 \u2022 Custom Top Banner<\/a>
\n \u2022 Navigation Bar<\/span><\/p>\n

\u2022 Middle Area<\/span><\/p>\n

\u2022 Profile Header<\/a>
\n \u2022 Contact Box<\/a>
\n \u2022 Profile Image<\/a><\/p>\n

\u2022 Left Column<\/a>
\n\u2022 \u2022 BasicInfo Section<\/a>
\n\u2022 \u2022 Music Section<\/a><\/p>\n

\u2022 Right Column<\/a>
\n\u2022 \u2022 Updates Section<\/a>
\n\u2022\u2022\u2022 \u2022 Input Area<\/a>
\n\u2022\u2022\u2022 \u2022 Updates Area<\/a>
\n\u2022\u2022\u2022 \u2022 User Comments<\/a>
\n\u2022 \u2022 Comments Section<\/span>
\n\u2022\u2022\u2022 \u2022 Post Comment<\/a><\/p>\n

\u2022 Bottom Area<\/a><\/p>\n

\u2022 Tweaks<\/span><\/p>\n

\u2022
\n \u2022 Pre-made Layouts<\/a><\/p>\n<\/div>\n<\/td>\n

\n
\n

nav bar – background and border<\/strong><\/p>\n

div#header ul#main_nav {
\nbackground-image: none;
\nbackground-color: blue<\/span>;
\nborder: 1<\/span>px solid red<\/span>;
\npadding-bottom: 0px;
\n}<\/div>\n

nav bar – font<\/strong><\/p>\n

div#header ul#main_nav li a,
\ndiv#header div#right_nav ul li a {
\ncolor: gold<\/span>;
\n}<\/div>\n

nav bar – hover effect<\/strong><\/p>\n

div#header ul#main_nav li:hover a,
\ndiv#header div#right_nav ul li:hover a {
\ncolor: black<\/span>;
\nbackground-color: transparent<\/span>;
\n}<\/div>\n

nav bar – dropdown menu – border<\/strong><\/p>\n

div#header ul#main_nav li ul, div#header div#right_nav ul li ul {
\nborder: 1<\/span>px solid red<\/span>;
\nborder-top: 0px;
\n}
\ndiv#header ul#main_nav li ul li.first, div#header div#right_nav ul li ul li.first {
\nborder-top-width: 0px;
\n}<\/div>\n

nav bar – dropdown menu – position fix<\/strong><\/p>\n

div#header ul#main_nav li ul {
\nmargin-top: 1px;
\n}
\ndiv#header div#right_nav ul li ul {
\nmargin-top: 2px;
\n}<\/div>\n

nav bar – dropdown menu – font and background<\/strong><\/p>\n

div#header ul#main_nav li ul li a,
\ndiv#header div#right_nav ul li ul li a {
\ncolor: gold<\/span> !important;
\nbackground-color: blue<\/span> !important;
\n}<\/div>\n

nav bar – dropdown menu – hover effect<\/strong><\/p>\n

div#header ul#main_nav li ul li:hover a,
\ndiv#header div#right_nav ul li ul li:hover a {
\ncolor: black<\/span> !important;
\nbackground-color: green<\/span> !important;
\nborder: none;
\n}<\/div>\n

nav bar – dropdown menu – “explore” icons<\/strong>
\nI thinks it’s not necessary to hide them, but just in case…<\/p>\n

div#header ul#main_nav li.explore ul li a,
\ndiv#header ul#main_nav li.explore ul li:hover a {
\nbackground-image: none !important;
\npadding-left: 5px;
\n}<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

\u2022 Introduction \u2022 Background \u2022 Top Area \u2022 \u2022 Custom Top Banner \u2022 Navigation Bar \u2022 Middle Area \u2022 Profile Header \u2022 Contact Box \u2022 Profile Image \u2022 Left Column \u2022 \u2022 BasicInfo Section \u2022 \u2022 Music Section \u2022 Right Column \u2022 \u2022 Updates Section \u2022\u2022\u2022 \u2022 Input Area \u2022\u2022\u2022 \u2022 Updates Area \u2022\u2022\u2022 \u2022 […]<\/p>\n","protected":false},"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3218","post","type-post","status-publish","format-standard","hentry","category-friendburst"],"_links":{"self":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/3218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/comments?post=3218"}],"version-history":[{"count":0,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/3218\/revisions"}],"wp:attachment":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/media?parent=3218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/categories?post=3218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/tags?post=3218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}