Merge pull request #310 from tabler/misaligned-menu

fix(SiteNav): Fix misaligned menu for mobile / smaller screens.

Author: AaronCoplan

src/components/Grid/GridCol.react.js

@@ -24,6 +24,7 @@ type Props = {|
   +offsetMd?: number,
   +offsetLg?: number,
   +offsetXl?: number,
+  +ignoreCol?: boolean,
 |};
 
 function GridCol({
@@ -47,10 +48,11 @@ function GridCol({
   offsetMd = 0,
   offsetLg = 0,
   offsetXl = 0,
+  ignoreCol = false,
 }: Props): React.Node {
   const classes = cn(
     {
-      col: true,
+      col: !ignoreCol,
       [`col-${width}`]: width,
       [`col-xs-${xs}`]: xs,
       [`col-xs-auto`]: xsAuto,

src/components/Site/SiteNav.react.js

@@ -54,7 +54,7 @@ const SiteNav = ({
       <Container>
         {children || (
           <Grid.Row className="align-items-center">
-            <Grid.Col lg={3} className="ml-auto">
+            <Grid.Col lg={3} className="ml-auto" ignoreCol={true}>
               {/* @TODO: add InlineSearchForm  */}
               {/* {rightColumnComponent || (withSearchForm && <InlineSearchForm />)} */}
               {rightColumnComponent}