"On a Whim" Menu Design Issue

• 

  cpsperanza · Member · Feb 14, 2017 at 4:28 pm

  • Copy link
  • Add topic to favorites

  Initially the issue was that the menu items didn’t use the white space as well as it could – leaving a pretty big gap between the text and the social media icons in the menu.

  The online help desk assisted me by writing some new CSS code into my theme. It’s “On a Whim” and was originally written by Word Press. The blog is https://wingedbeautydotcom.wordpress.com

  Here’s what we’ve got so far:

  /* Width of Menu Area */
  .navigation-social-links {
  width: 100%;
  }

  /* Width of Menu Items */
  .navigation-main {
  width: 90%;
  }

  /* H.Alignment of Top Social Links */
  .social-links {
  margin: -35px 0 0;
  }

  /* T.Alignment of Top Social Links */
  .site-header .social-links-wrapper {
  width: 20%;
  padding-top: 0;
  }

  Now the issue is that when I add a new menu item and it wraps, the social icons come with it. Is there code I can add that will pin the social icons to the top level? And then the second row of menu items will stretch out underneath it?

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

• 

  thesacredpath · Member · Feb 14, 2017 at 8:38 pm

  • Copy link

  Hi there, add the following to the bottom of your custom CSS to keep the social links on the right.

  .site-header .social-links-wrapper {
  	float: right;
  }

• 

  cpsperanza · Member · Feb 21, 2017 at 4:11 pm

  • Copy link

  I’m afraid to say that this code does not resolve the issue. When I add an additional menu item, the social icons move downwards. I need them to stay at the top-most line and to the right.

  Here’s a screenshot of a test I ran after adding the suggested code and then an additional menu item:
  

• 

  thesacredpath · Member · Feb 22, 2017 at 1:22 am

  • Copy link

  There is some custom CSS you have now that is causing the issue. Remove this from your custom CSS.

  .social-links {
  	margin:-35px 0 0
  }

  Next, find the following rule in your custom CSS and change the width from 90% to 75%.

  .navigation-main {
  	width:75%
  }

  And then modify this CSS rule in your custom CSS to look like this.

  .site-header .social-links-wrapper {
  	width:20%;
  	padding-top:20px;
  	float:right;
  }

• 

  cpsperanza · Member · Mar 8, 2017 at 5:01 pm

  • Copy link

  This new code and alterations to the old certainly assisted with the wrapping issue. Thanks so much!

• 

  thesacredpath · Member · Mar 9, 2017 at 2:35 am

  • Copy link

  You are welcome.