Question

我正尝试将汉堡包菜单移到最右边，因此在移动设备和ul上看起来更好，所以也在右边。

我在navbar-toggler上添加了navbar-toggler-right，并且还在ul中添加了navbar-nav mr-auto，但是虽然它位于文本的右侧，但仍然不在右侧，并且链接是由于某种原因向左对齐。有任何想法吗？ attached screenshot

@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>

Answer 1

尝试将right: 15px;和position: absolute;添加到navbar-toggler-icon，以将菜单移到右侧。

.navbar-toggler-icon {
    right: 15px;
    position: absolute;
}

如何解决汉堡菜单向右移动的问题？

1 个答案: