KeyMaker

Sorry I took so long to get back to you. Had a few clients I had to take care of during the holiday season. If you want to move the social icons into the navigation area:

1. Go to the Tempera Parent theme folder and copy the “header.php” file and paste it into the Tempera Child theme folder.
2. With the child theme activated, use the editor and select the “header.php”
3. In the “header.php” file, look for the following line: <div id=”topbar” ><div id=”topbar-inner”> <?php cryout_topbar_hook(); ?> </div></div>. It should be on line 28. If you don’t have numbered lines, download and install the “Advance Code Editor” plugin.
4. From that line of code, highlight and cut <div id=”topbar-inner”> <?php cryout_topbar_hook(); ?> </div> part of the code.
5. Find line 43 in the code. It should be blank. Paste what you previously cut. Save your work.
6. Go back to your website and refresh the page. The social links should be within the navigation bar.

To ensure your work will not be lost:

1. Use a child theme for Tempera.

1. Tempera is a Parent theme and you run the risk of losing all of your configurations whenever a Parent theme updates.
2. A Child theme has the “DNA” of the Parent theme (looks and acts just like the parent) but your customizations can survive an update
3. If you don’t know how to make a child theme follow these instructions: https://codex.wordpress.org/Child_Themes or try a plugin that can create child themes.

• Once you have a Child theme, make your customizations within the style.css file using the editor. That way, if you change your theme you won’t lose your work because it will be saved in the child theme folder within the style.css file.

However, if you use the Dashboard > Appearance > Customize or > Theme Options, you might lose your work. Not 100% on that because I usually code with the style.css. Hope this helps.

In addition, if you made custom changes to the child theme’s css file your changes should remain intact. Also, save a backup of any work you do before changing themes just to be safe.

Try this. It’s not perfect but it should get you in the right direction. Let me know if it helps or confuses lol.

#branding {
  width: 33%;
}
#access {
  float:right;
  width: 67%;
}
#site-title span a {
  font-size: 70px;
}
#site-title {
  line-height: 0;
}
#access > .menu > ul > li > a > span {
  border-left: 1px solid;
  border-right: 0 none;
  box-shadow: -1px 0 0;
  font-size: 14px;
}
#header, #main, #topbar-inner {
  max-width: 1246px;
}