Topic: React Navbar Dropdown Menu off Screen
                  
                  hoaraucg
                  free
                  asked 6 years ago
                
Expected behavior Menu should appear right aligned to the screen
Actual behavior Menu actually appears offscreen when dropdown is used.
Resources (screenshots, code snippets etc.) Have tried using dropdown-menu-right to no avail.
  <MDBNavbar color="elegant-color-dark" dark expand="md">
    <MDBNavbarBrand>
    <div className="logo-wrapper 20x20">
            <a href="#!">
              <img style={{width: '60px', height: '60px'}} alt="Arrg Logo" src="https://i.imgur.com/sEitLk6.png" />
            </a>
          </div>
    </MDBNavbarBrand>
    <MDBNavbarToggler onClick={this.toggleCollapse} />
    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
      <MDBNavbarNav right center>
      <MDBNavItem>
          <MDBDropdown dropdown-menu-right>
            <MDBDropdownToggle nav caret>
              <MDBIcon icon="user" height="60px" width="60px" className="center"/>
            </MDBDropdownToggle>
            <MDBDropdownMenu dropdown-menu-right className="dropdown-dark">
              <MDBDropdownItem href="/">Home</MDBDropdownItem>
              <MDBDropdownItem href="/create">Create your Arrg-ument</MDBDropdownItem>
              <MDBDropdownItem href="/profile">View your Profile</MDBDropdownItem>
              <MDBDropdownItem onClick={this.onLogoutClick} href="/">Logout</MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
        </MDBNavItem>
      </MDBNavbarNav>
    </MDBCollapse>
  </MDBNavbar>
                
                  
                      
                      Aliaksandr Andrasiuk
                      staff
                        answered 6 years ago
                    
Hi,
Try to use right property instead of dropdown-menu-right :
import React, { Component } from 'react';
import {
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarToggler,
  MDBCollapse,
  MDBNavbarNav,
  MDBNavItem,
  MDBDropdown,
  MDBDropdownToggle,
  MDBIcon,
  MDBDropdownMenu,
  MDBDropdownItem
} from 'mdbreact';
class InputPage extends Component {
  state = {
    isOpen: false
  };
  render() {
    return (
      <MDBNavbar color='elegant-color-dark' dark expand='md'>
        <MDBNavbarBrand>
          <div className='logo-wrapper 20x20'>
            <a href='#!'>
              <img
                style={{ width: '60px', height: '60px' }}
                alt='Arrg Logo'
                src='https://i.imgur.com/sEitLk6.png'
              />
            </a>
          </div>
        </MDBNavbarBrand>
        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id='navbarCollapse3' isOpen={this.state.isOpen} navbar>
          <MDBNavbarNav right center>
            <MDBNavItem>
              <MDBDropdown dropdown-menu-right>
                <MDBDropdownToggle nav caret>
                  <MDBIcon
                    icon='user'
                    height='60px'
                    width='60px'
                    className='center'
                  />
                </MDBDropdownToggle>
                <MDBDropdownMenu right className='dropdown-dark'>
                  <MDBDropdownItem href='/'>Home</MDBDropdownItem>
                  <MDBDropdownItem href='/create'>
                    Create your Arrg-ument
                  </MDBDropdownItem>
                  <MDBDropdownItem href='/profile'>
                    View your Profile
                  </MDBDropdownItem>
                  <MDBDropdownItem onClick={this.onLogoutClick} href='/'>
                    Logout
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>
          </MDBNavbarNav>
        </MDBCollapse>
      </MDBNavbar>
    );
  }
}
export default InputPage;
Hope I could help.
Best regards.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB React
 - MDB Version: 4.18.1
 - Device: PC
 - Browser: Chrome
 - OS: Windows 10
 - Provided sample code: No
 - Provided link: No