override a responsive elements css behaviour

• 

  paul814 · Member · Jan 15, 2015 at 7:47 am

  • Copy link
  • Add topic to favorites

  The navigation menu on my blogs theme is float: right;

  One of the themes media queries repositions the menu on the left once the viewport gets below 810px.

  @media screen and ( max-width: 810px ) {
   .navigation-main {
          clear: both;
          float: none;
          width: 100%;
      }
  }

  How can I override that behaviour so that the menu remains on the right if the viewport goes below 810.

  I don’t seem to be able to override it in the custom css.
  Whats the best way?

  Thanks for any advice!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 15, 2015 at 9:42 pm

  • Copy link

  Hi there, add the following at the bottom of your custom CSS. The first rule reverses the 810px media query so the menu stays on the right, and the second one, at 600px and narrower brings the mobile touch menu on top of the grey banded graphic (it was hidden behind it).

  @media screen and (max-width: 810px) {
  	.navigation-main {
  		float: right !important;
  		clear: none;
  		width: auto;
  	}
  }
  
  @media screen and (max-width: 600px) {
  	.navigation-main {
  		position: relative;
  	}
  }

• 

  paul814 · Member · Jan 16, 2015 at 12:03 am

  • Copy link

  Perfect!
  Thank you.

  I did actually try

  float: right !important;
  clear: none;

  but i omitted the width: auto; which was my mistake.

  I appreciate the extra tip to move the touch menu – works just as i wanted.

• 

  thesacredpath · Member · Jan 16, 2015 at 8:52 pm

  • Copy link

  You are welcome.