Gravity Skin Nav Bar Styling
Last Post 07/26/2014 4:23 PM by Joseph Craig. 3 Replies.
Author Messages
Jim Anthony
Nuke Newbie
Nuke Newbie
Posts:1


--
07/24/2014 11:19 AM
    I have never worked with the bootstrap menu before and there are two things in the navbar that I can't find the correct attribute setting to update.

    I stated with a copy of the Gravity skin to customize, got the colors changed, but I would like to left justify the dnn:menu (and menu button). Second I would like to move the drop down menu a little lower so that the pointer at the top of the dropdown does not cover the text of the menu (see attachment).

    I have tried moving the dnn:menu into a simpler menu, but then the drop down menus on hover did not appear.

    Suggestions?

    Thanks,

    Jim


    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/25/2014 8:18 AM
    Look at the skin's .ascx file to see the structure of the divs into which the menu is places. You should be able to work with the css for those items to achieve the desired placement. You'll probably need to look at the Bootstrap css files and also skin.css.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Jim Anthony
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    07/26/2014 12:43 PM
    After a lot of trial and error, found the solution.

    In case someone else has a desire to do this, two changes

    Change the skin ascx file from ,
      
                         <div id="navdttg" class="nav-collapse collapse pull-right"> 
                             <dnn:MENU ID="bootstrapNav" MenuStyle="bootstrapNav" runat="server"></dnn:MENU> 
                         </div> 
    

    to
      
                         <div id="navdttg" class="nav-collapse collapse"> 
                             <dnn:MENU ID="bootstrapNav" MenuStyle="bootstrapNav" runat="server"></dnn:MENU> 
                         </div> 
    

    Update the skin.css, nav-collapse class to remove float-right
        
         /* Site Navigation */ 
         .nav-collapse { 
     	   /* float: right;*/ 
     	    position:relative; 
     	    top: 18px; 
         } 
    


    To adjust the arrow location top attribute (was -15px)
    .navbar .nav > li > .dropdown-menu:after {
    position:absolute!important;
    top: -6px!important;

    Hope this helps someone else,

    Jim




    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/26/2014 4:23 PM
    Thanks, Jim!

    Joe Craig, Patapsco Research Group
    Complete DNN Support


    ---