मैं हैमबर्गर मेनू को दूर दाईं ओर ले जाने का प्रयास कर रहा हूं, इसलिए यह मोबाइल पर बेहतर दिखता है और उल को संरेखित करता है, इसलिए यह भी दाईं ओर है।

मैंने नेवबार-टॉगलर-राइट को नेवबार-टॉगलर में जोड़ा है और उल में नेवबार-एनएवी एमआर-ऑटो भी जोड़ा है, लेकिन जब यह टेक्स्ट के दाईं ओर है, तब भी यह दाईं ओर नहीं है और लिंक संरेखित हैं किसी कारण से छोड़ दिया। कोई विचार? संलग्न स्क्रीनशॉट

@media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;}
             .navbar-text {      overflow-wrap: break-word;
    }
      
    
    }
    
    
    span.text {
        float: left;
        margin-right: 30px;
    }
    span.text p{margin-top: 15px!important;}
    
    .navbar-toggle .icon-bar{
          margin-left: auto;
       margin-top none !important;    }
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
          overflow-x: hidden !important;		
    
    }
    
    
    }
    @media screen and (max-width: 600px) {
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    
    @media screen and (max-width: 600px) {
    img.content{   width:80%;
     border:#01009C 1px  solid; display: block; margin: 0 auto; vertical-align:middle !important;	}
     
    
    
    
    
    }
    }
    .container{	word-wrap: break-word!important;	padding:0px; background:orangered;}
    .topnav {
      overflow: hidden;
      margin-bottom: 10px; 
    }
    
    .topnav a.navbar-brand{
      display:none;
    
        vertical-align: top;
    }
    .topnav .nav-link i{
      margin-top:5px;
    }
    .topnav .nav-link img{
      margin-top:5px;
    }
    .navbar-header img{
      width:100px;
    }
    
    .topnav a {
    font-family:MuseoSans-500;
      display: inline-block;
      text-decoration: none;
      font-size: 20px;
      font-weight: normal;
    	font-style: normal;
    
    }
        
    /* 
     
    h2 { font-size:25px !important;     font-family: MuseoSans-100 !important;
        font-weight: normal;
        font-style: normal;
    clear:both;   color: orangered;
    } */
    
    .active {
    color: white;
    }
    
    .topnav .icon {
      display: none;
    }
    .navbar-text{ white-space: normal;	font-size:40px;	   color:orangered;word-wrap: break-word!important;}
    
    
    img.content{    
     border:#01009C 1px  solid; display: block; margin: 0 auto; vertical-align:middle !important;	}
     
    
      .container{background:white;overflow:hidden!important;}
    
      
      .img-fluid {
          max-width: 100%;
          height: auto;
        }
      
      @media (max-width:768px){
        .topnav a{
          font-size:18px !important;
        }
        img {  vertical-align: top!important;}
    .topnav .nav-link img, .topnav .nav-link i {margin:-4	; width:20px;}
    
      .navbar-header h1{
        font-size:35px!important; 	word-wrap: break-word!important;
    }
    
    h2{font-size:25px!important;}
    html{ overflow-x: hidden;}
    
      }
      
      .navbar
      
      @media(max-width:540px){
        .topnav a.navbar-brand{
          display: block;
        transform: translateX(43%);
        }
        
            .form-inline .form-control { 
        display: inline-block !important; 
        width: auto!important
    
      }
          .nav-item a {text-align:left!important;}
          
        .topnav .nav-link i{
        margin-top:0;
      }
      .topnav .nav-link img{
        margin-top:0;
      }
        .link1{
          display:none;
        }
        
        .navbar-header img{
        width:100px;
      }
    
    
      }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar justify-content-center">
                <div class="navbar-brand navbar-header">
                    <img class="img-fluid" src="includes/om.svg" width="100" >
                    <h1 class="navbar-text primary">Grampian Yoga Association</h1>               
                    
                 </div>
            
        </nav>
                  
    
    
        <body>
    
    <nav class="navbar navbar-expand-lg topnav " id="myTopnav">
        
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            
            <span class="navbar-toggler-icon"><i class="material-icons">
    menu
    </i></i></span>
    
                        <span class="text"><p>Toggle navigation</p></span>
                       <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        
          </button>
          
          <div class="collapse navbar-collapse navbar-default" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
        
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>">Home</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/summerclasses.php">Summer Classes</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/teachers.php">Classes and Teachers</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/seminars.php">Seminars</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/com.php">Committee</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/accounts.php">Accounts</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/about.php">About</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/membership.php">Membership</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/maintain.php">Links</a>
              </li>
              
          </div>
          
      </nav>
0
LvO92 12 सितंबर 2019, 15:19

1 उत्तर

सबसे बढ़िया उत्तर

मेनू को दाईं ओर ले जाने के लिए right: 15px; और position: absolute; को navbar-toggler-icon में जोड़ने का प्रयास करें।

.navbar-toggler-icon {
    right: 15px;
    position: absolute;
}
0
brooksrelyt 12 सितंबर 2019, 13:47