position changes on hidden menu via different internet browsers,

• 

  dhuston51 · Member · Feb 3, 2016 at 4:42 pm

  • Copy link
  • Add topic to favorites

  I have a hidden menu on my header over the ‘eye plant’ symbol, but when I view it through internet explorer or chrome the menu seems to be in a different position on the page. I’m thinking it has to do with how resolution is displayed? Is there a way to fix this? Thank you.

  http://communicating-mindfully.com/

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

• 

  thesacredpath · Member · Feb 4, 2016 at 2:38 am

  • Copy link

  Hi there, first off let’s correct something in your CSS that is causing your content to be off the right side of the page on narrower screens/browsers. Find this rule in your custom CSS

  .page-content {
      width: 1060px;
  }

  and change it to this.

  .page-content {
      max-width: 1060px;
      width: 100%;
  }

  On your menu item you have moved up, go into your customizer and add this to your menu item relocation CSS rule you made,
  border: 5px solid #cc0000;
  so you can see the outline of it and see where it is and how it behaves. Narrow and widen your browser window, and even collapse the left sidebar in the customizer using the button at lower left so your browser window can display the entire page.

  When using position: absolute; to move an item the item loses all relationship to all other page elements and basically floats free above everything else. The left/right/top/bottom declarations position the item in relationship to the browser viewport, and on responsive themes, all the other page elements shift and resize, so the item moved with position: absolute; typically will not stay where you want it.

  I’ve looked at the way the HTML and CSS are structured in Argent, and I don’t see a way to position that menu link over the eye plant and have it stay there without having to write many, many Media Queries to keep repositioning it over the eye plant and resizing it as the header image changes size.

  That was a long-winded way of saying this really isn’t going to be possible.

  Let me know your thoughts.

• 

  dhuston51 · Member · Feb 5, 2016 at 9:52 pm

  • Copy link

  Oh cool, thank you. I really appreciate the response. I will play around with it. Its not ideal but maybe I can get it to work %85. Do you know of any other way to make the header a link using the argent theme, or maybe just another way of going about this. Thanks again.

• 

  thesacredpath · Member · Feb 5, 2016 at 11:18 pm

  • Copy link

  Hi, I’ve tried a number of tricks to it’s going to take a number of media queries. Given your mention of 85%, I’ve worked out the following. I’ve kept the red border code in so that you can see how things shift as you narrow and widen your browser window. I’ve limited this to screens between 1800px and 960px wide. At less than 960 the eye starts to disappear behind the right border.

  First off, replace this rule in your CSS with the following.

  .menu-item-944 a {
  	display:block;
  	position:absolute;
  	top:130px;
  	right: 21%;
  	width:180px;
  	height:160px;
  	text-align:left;
  	text-indent:-9999px;
  	border: 3px solid red
  }

  Next, add the following at the very bottom of your custom CSS, after everything else.

  @media screen and (min-width: 1800px) {
  	.menu-item-944 a {
  		display: none !important;
  	}
  }
  @media screen and (max-width: 960px) {
  	.menu-item-944 a {
  		display: none !important;
  	}
  }
  @media screen and (max-width: 1400px) {
  	.menu-item-944 a {
  		right: 16% !important;
  	}
  }
  @media screen and (max-width: 1195px) {
  	.menu-item-944 a {
  		right: 10% !important;
  		top: 240px
  	}
  }
  @media screen and (max-width: 1070px) {
  	.menu-item-944 a {
  		right: 5% !important;
  	}
  }

  If the above is acceptable to you, you can then remove the rede border declaration I have in the first CSS rule above.