Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Youtube HeaderNav layout
import React from 'react';
import {Image, Menu} from 'semantic-ui-react';
import './HeaderNav.scss';
import logo from '../../assets/images/logo.jpg';
export class HeaderNav extends React.Component {
render() {
return (
<Menu borderless className='top-menu' fixed='top'>
<Menu.Item header className='logo'>
<Image src={logo} size='tiny'/>
</Menu.Item>
<Menu.Menu className='nav-container'>
{/* TODO */}
</Menu.Menu>
</Menu>
);
}
}
export default HeaderNav;
.ui.menu.top-menu {
border: none; /*Remove Semantic UI's bottom border*/
.logo {
width: 17rem;
}
.nav-container {
justify-content: space-between; /*maximize whitespace between elements*/
flex-grow: 1; /* take available space in the flex container */
padding: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.