• 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

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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 ??

    Thread Starter mantra123

    (@mantra123)

    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 https://pastebin.com/aRgy6QL2
    thank you
    plaese help me too

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘drop down menu to left’ is closed to new replies.