changes to Edin theme

• 

  anniebungeroth · Member · Apr 26, 2016 at 3:21 pm

  • Copy link
  • Add topic to favorites

  Im using the Edin theme for a friends site – she wants the menu and the site name each on one line -at the moment both go over into 2 – what code can I add (she has a business plan ) to allow the menu and site name to be a little wider and allow everything in?

• 

  thesacredpath · Member · Apr 26, 2016 at 8:16 pm

  • Copy link

  Hi there, can I have a link to the site? The length of the site title and how many menu items are in the menu will have an impact on what we can do and how we do it.

• 

  anniebungeroth · Member · Apr 27, 2016 at 8:44 am

  • Copy link

  many thanks

  ignore rest – very much a work in progress

  website owner doesnt want to change wording of either title or page names

  Home: Carolyn McGregor BSc (Ost.)., BA Div (Hons)., MARH.,

• 

  thesacredpath · Member · Apr 27, 2016 at 9:57 pm

  • Copy link

  Given the length of the menu and the site title, we can get things to be on one line on screens/windows that are 1300px and wider, but below that they both go back to two lines. This would be the CSS to achieve this.

  .navigation-classic .menu-primary, .navigation-classic .menu-secondary, .header-wrapper {
      width: 95%;
  }
  .has-header-search .site-branding, .site-branding {
      max-width: 100% !important;
      width: 100% !important;
      margin-left: 0;
  }
  .has-header-search .site-branding .site-title, .site-branding .site-title {
      text-align: center;
      margin-bottom: 0;
  }

  What I might suggest would be to make the title, Carolyn McGregor and then Osteopathy, Homoeopathy, Healing the site tagline/description. That would take care of the title issue, but the issue with the menu would remain. With the menu, we could make some changes to the styling of it to reduce the overall width, such as getting rid of the all uppercase, which would keep the menu on one line down to about 1080px in width.

  .site-description {
      display: block;
      margin-top: -45px;
      font-size: 120%;
      color: #303030;
  }
  @media screen and (min-width: 1020px) {
  .navigation-classic .menu-primary, .navigation-classic .menu-secondary {
      width: 95%;
  }
  .primary-navigation .menu-primary > ul > li > a {
      text-transform: none;
  }
  .navigation-classic .primary-navigation .menu-primary > ul > li.menu-item-has-children > a {
      padding-right: 2.5em;
  }
  .navigation-classic .primary-navigation .menu-primary > ul > li > a {
      padding-right: 18px;
  }
  .navigation-classic .primary-navigation .menu-primary a:last-of-type {
      padding-right: 0;
  }
  }

  The menu changes I’ve wrapped in a Media Query so that they don’t affect the menu styling after the touch device menu becomes active.

  The only other choice for the site title would be to make the font much smaller and I don’t think that would be a good option since it isn’t that large to begin with.

  Give the above options a try and let me know your thoughts.