Custom Header Content in Ultimate Branding Plugin

Can someone give a quick guide on styling (css) in the Global Header. Tried to look for it on the site but haven't had much luck. I can't figure out how to get the css to work with the Global Header (or Footer).

Want to do something similar to the Word Press Admin Bar in the admin interface that shows up when you are logged in. Or more simply put - an infinite black bar across the top with white html links.

Thanks in advance for help in achieving this.

    Vinod Dalvi

    Hi @qtree-systems,

    Have you tried the solution suggested by @Jack Kitterhing in his previous reply?

    You will have to style the created network wide menu to match it with your site design.

    You can also use the following forked version of network-wide-menu plugin that allows you to have as many menus as you want loaded across each network site.

    http://jayroman.com/blog/wordpress-network-wide-menus

    Best Regards,
    Vinod Dalvi

    qtree-systems

    Thanks for the replys, but I was wanting to put a global menu throughout all network sites with the "Global Header Content" of the Ultimate Branding Plugin. What I was struggling to figure out was how to do the styling for this menu. I wanted a black background with white menu items, but couldn't figure out how to do the css styling inside the Custom Header feature of the plugin.

    I figured out this evening and will share it here on the forum in case someone else has the same question. To use css styling inside this header feature simply use the code tags and embed style tags inside of the code tags(see example below). This allows you to input the css styling you want for your menu and then the menu itself is a simple html menu.

    Example:

    <div id="cssmenu">
    <ul>
    	<li class="active"><a href="index.html">Home</a></li>
    	<li><a href="#">Products</a></li>
    	<li><a href="#">About</a></li>
    	<li class="last"><a href="#">Contact</a></li>
    </ul>
    </div>
    <code>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
    #cssmenu {
    background: #060100;
    width: auto;
    }
    #cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: block;
    zoom: 1;
    }
    #cssmenu ul:after {
    content: ' ';
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    #cssmenu ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
    }
    #cssmenu.align-right ul li {
    float: right;
    }
    #cssmenu.align-center ul {
    text-align: center;
    }
    #cssmenu ul li a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 15px 25px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
    -ms-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s;
    }
    #cssmenu ul li a:hover {
    color: #333333;
    }
    #cssmenu ul li a:hover:before {
    width: 100%;
    }
    #cssmenu ul li a:after {
    content: '';
    display: block;
    position: absolute;
    right: -3px;
    top: 19px;
    height: 6px;
    width: 6px;
    background: #ffffff;
    opacity: .5;
    }
    #cssmenu ul li a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #333333;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
    }
    #cssmenu ul li.last > a:after,
    #cssmenu ul li:last-child > a:after {
    display: none;
    }
    #cssmenu ul li.active a {
    color: #333333;
    }
    #cssmenu ul li.active a:before {
    width: 100%;
    }
    #cssmenu.align-right li.last > a:after,
    #cssmenu.align-right li:last-child > a:after {
    display: block;
    }
    #cssmenu.align-right li:first-child a:after {
    display: none;
    }
    @media screen and (max-width: 768px) {
    #cssmenu ul li {
    float: none;
    display: block;
    }
    #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #390a00;
    }
    #cssmenu ul li.last > a,
    #cssmenu ul li:last-child > a {
    border: 0;
    }
    #cssmenu ul li a:after {
    display: none;
    }
    #cssmenu ul li a:before {
    display: none;
    }
    }
    </style>
    </code>