2016-07-13 2 views
0

Я разработал пользовательскую страницу в Wordpress. Чтобы сделать эту страницу отзывчивой, я создал навигацию для навигации на панели навигации на странице. Но Toggle Navigation bar приближается к правой стороне страницу, я хочу, чтобы она отображалась в левой части страницы.Как переместить навигацию в левой части страницы

Мой второй запрос: -

Я хочу знать, что, как мы можем решить, при котором ширина браузера, тумблер навигационная панель должна прийти.

Пожалуйста, помогите мне достичь выше обеих целей

body 
 
{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t width:100%; 
 
} 
 
.navMenu 
 
{ 
 
\t width:100%; 
 
\t background-color:#440000; 
 
} 
 

 
ul.Menu 
 
{ 
 
    list-style-type:none; 
 
\t text-decoration:none; 
 
\t font-size:18px; 
 
\t width:100%; 
 
\t position:relative; \t 
 
\t display:inline-block; 
 
\t margin-top:0px; 
 
\t padding:10px; 
 
\t text-align:center; 
 
\t padding-left:28%; 
 
\t 
 
} 
 

 

 
li.Menu 
 
{ 
 
    display: inline-block; 
 

 
\t 
 
} 
 

 
.list{ 
 
    float:left; 
 
\t margin-left:2%; 
 
} 
 

 
.Listclass 
 
{ 
 
\t color:#942218; 
 
\t text-decoration:none; 
 
} 
 

 
.searchform 
 
{ 
 
\t margin-top: -4px; 
 
} 
 

 
.navbar .brand { 
 
max-height: 50px; 
 
overflow: visible; 
 
padding-top: 0; 
 
padding-bottom: 0; 
 
background-color:white; 
 
} 
 
.navbar a.navbar-brand {padding: 0px 8px 0px;} 
 

 
.navbar-default { 
 
    background-color:white; 
 
    border: none; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: blue; 
 
} 
 

 
.navbar-toggle 
 
{ 
 
\t  background-color: white; 
 
    background-image: none; 
 
    /*border: 1px solid black; */ 
 
} 
 

 
.navbar-toggle .icon-bar 
 
{ 
 
\t background-color: black; 
 
} 
 
.Listclass 
 
{ 
 
\t color:#942218; 
 
\t text-decoration:none; 
 
} 
 
.MenuDIV 
 
{ 
 
\t width:70%; 
 
} 
 

 
.form1 
 
{ 
 
\t float:right; 
 
\t margin-top: -75px; 
 
    margin-right: 326px; 
 
} 
 
.navMenu 
 
{ 
 
\t width:100%; 
 
}
<div class="navMenu"> 
 
<nav class="navbar" role="banner"> 
 

 
<div class="navbar-header"> 
 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
<span class="sr-only">Toggle navigation</span> 
 
<span class="icon-bar"></span> 
 
<span class="icon-bar"></span> 
 
<span class="icon-bar"></span> 
 
</button> 
 
</div> 
 
<div class="collapse navbar-collapse navbar-left MenuDIV" style="width:70%"> 
 
<ul class="nav navbar-nav navbar-right Menu"> 
 
    <li class="list"><a class="active" href="#HOME"><img src="http://10.37.4.179/wordpress/wp-content/uploads/2016/07/home-active.png"></a></li> 
 
    <li class="list"><a class="Listclass" href="#Community">COMMUNITY</a></li> 
 
    <li class="list"><a class="Listclass" href="#Board">BOARD</a></li> 
 
    <li class="list"><a class="Listclass" href="#FAQ">FAQ</a></li> 
 
    <li class="list"><a class="Listclass" href="#RESOURES">RESOURES</a></li> 
 
    <li class="list"><a class="Listclass" href="#Contact">CONTACT US</a></li> 
 
</ul> 
 
</div> 
 

 
</nav> 
 
<form class="navbar-form form1" role="search"> 
 
    <div class="input-group add-on"> 
 
     <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> 
 
     <div class="input-group-btn"> 
 
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
</div>

+0

Можем ли мы взглянуть на ваш код? – Yaron

+0

Нам нужно знать, что вы сделали для своего первого запроса, как выглядит ваша страница и как должна выглядеть ваша страница. Код поможет много – Relisora

+0

Я добавил свой код. Пожалуйста, изучите это. –

ответ

0

1.in Genaral для переключения «Поплавок: правый» CSS свойство будет там вы можете изменить его плавать: слева, то меню придет налево, 2. найти ширину окна меню браузера Firefox нажмите ctrl + shift + m, затем измените размер до тех пор, пока не найдете меню переключения

+0

Здравствуйте, сэр, я добавил свой код. любезно рассмотрите это и предложите мне, какие изменения мне нужно сделать –

+0

http://jsfiddle.net/YogeshDV/5dGA8/317/ см. это, и скажите, правильно ли это –

+0

https://jsfiddle.net/adminsunil/t6gq52cm/ попробуйте этот тоже –

0

Я думаю, что под кодом вам помогут:

$(function() { 
    $("#openmenu").click(function() { 
     $('#menuleftcontent').animate({ 
     width: "toggle" 
     }); 
    }); 
}); 

Demo

Смежные вопросы