WordPress.org

Ready to get started?Download WordPress

Forums

drop down menu to left (4 posts)

  1. mantra123
    Member
    Posted 1 year ago #

    hello
    i am using the mantra theme ,i would like to move the drop down menu to the right side
    ,when i have added margin-left to the #access,the sroll bar appears at the bottom

    i am attaching the css of the nav bar

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    /* =Menu -PRIMARY
    -------------------------------------------------------------- */
    
    #access {
    	display:block;
    
        margin-top:-105px;
    }
    
    #access ul {
        position:relative;
        margin-top:10px;
        color:black;
        display:inline;
    
    }
    
    #access  ul  li.current_page_item,  #access ul li.current-menu-item  {
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        background:url(images/MenuSel.png) repeat;
        height:24px;
    }
    
    #access a {
    	display:block;
    	color:#007cc1;
        font-family:'Myriad Pro';
    	text-decoration: none;
    	padding:0.2em 1.2em;
    	font-size:14px;
        border-bottom:1px #ff0000;
    }
    
    #access ul li {
        display:block;
        float:left;
        background:url(images/NavTabRpt.png);
        -webkit-border-radius:0px 0px 0 0;
        -moz-border-radius:0px 0px 0 0;
        border-radius:0px 0px 0 0;
        margin:0 0px;
        padding:3px 0;
        -moz-box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
        -webkit-box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
        box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
    }
    
    #access a:hover {
    	color:#0C85CD ;
    }
    
    #access ul ul {
    	display: none;
    	position: absolute;
    	clear:both;
    	z-index: 99999;
    	margin-left:0px;
    	-moz-box-shadow:0 10px 10px rgba(0, 0, 0, 0.3) ;
    	-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);
    	box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);
        background:url(images/NavTabRpt.png);
    }
    #access ul ul li { /* level 2 */
        margin:0;
        width: 100%; /* submenu width fix */
        border-bottom: 0px solid rgba(220,220,220,0.3);
        /* white-space: pre;*/
    	position:relative;
    	background:url(images/DropDown.png);
        height:25px;
    	-webkit-border-radius: 0;
    	-moz-border-radius:0;
    	border-radius: 0;
    	-moz-box-shadow:none ;
    	-webkit-box-shadow:none ;
    	box-shadow:none;
    	display:block;
    	float:left;
    	clear:both;
    	min-width:150px;
    }
    
    #access ul ul ul {
        position:absolute;
    	left: 100%;
    	top: 0px;
    	margin:0;
    }
    
    #access ul ul ul li { /* level 3 */
        border: 0;
        width: 100%;
        display: block;
        float: none;
        border-bottom: 1px solid rgba(220,220,220,0.3);
        white-space: pre; /* submenu width fix */
    }
    
    #access ul ul a, #access ul ul ul a {
    	display:block;
    	float:none;
    	color:#007cc1;
        height:25px;
    	width:100% ;
    	padding-top: 0.6em ;
    	padding-bottom: 0.6em ;
    }
    
    #access ul ul li:hover, #access ul ul ul li:hover {
    	color:red;
        height:25px;
    }
    
    #access li:hover > a {
    	color:#0E85CD ;
    }
    
    #access ul ul :hover > a {
    	color:#0E85CD;
    }
    
    #access ul li:hover > ul {
    	display: block;
    }
    #access ul li.current_page_item > a,
    #access ul li.current-menu-item > a{
    
    	color: black !important;
    }
    
    #access ul ul li.current_page_item ,
    #access ul ul li.current-menu-ancestor,
    #access ul ul li.current-menu-item ,
    #access ul ul li.current-menu-parent {
    	color: #000 !important;
    	background:url(images/DropDownSelected.png) !important;
    }
    
    * html #access ul li.current_page_item a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    	color: #5F5B5B ;
    }

    please help me
    thank you

  2. Mohd Rafie
    Member
    Posted 1 year ago #

    Hi there,

    First of all, can you provide a link to the site you're working on?

    Other than that, kindly use online service like pastebin.com to paste codes so that it is more manageable to read this thread ;)

  3. mantra123
    Member
    Posted 1 year ago #

    hello rafie
    sorry i havent hosted my site,so i wont be able to put the link here.
    i am also looking for the browser compactibility ,safari does not show the navigation bar atall,werw as mozilla and chrome works well,still i could not align it to right side,please look here for the code http://pastebin.com/aRgy6QL2
    thank you
    plaese help me too

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    You need to provide a PasteBin link of the HTML for that webpage as well.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.