Help creating a header menu — wisdom needed [Theme: Tempera}

Regarding the title and the navigation links, do you have a particular size in mind?

I would like Astralingua to be larger than the rest of the links but to still have them on the same line. So maybe 24 size font for the title and 14 for the rest? Just an estimate.

If possible I would like the title to remain a different color than the rest also.

Thanks.

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;
}

Disregard the #site-title {line-height:0;} Forgot to delete that from my “scratchpad”

That’s the closest I’ve gotten so far! Thank you very much. I tweaked the font size and the percentages a bit to make it work…although I don’t understand it all, it works!

https://www.astralingua.com/makeitso

Now I want to get rid of the top bar, but my theme only offers the social icons I want in the top bar, side and footer, but not the primary. Is there a way to get them in the primary menu?

Nice! Glad I was able to point you in the right direction. Try this for the top bar:

#topbar {
    display: none;
}

Are you devoted to that particular style of social icons? I ask because some plugins will allow you the freedom of placing social icons wherever you want. Let me know if that helps.

Devoted is too strong of a word, but I do like the ability to choose the color and the hover feature. Actually I’d like them to be bigger. What plugin do you recommend? Putting them elsewhere would be great, perhaps under the main menu.

There is a way to hide the top bar through the Tempera theme also, so no worries on that.

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.

Let me know if that works for you and if you have any other requests.

Hi again Marcellas,

Thanks for the reply about moving the social icons. I’ve been working on other things too but will try it out soon.

I have a question about the header that you helped me with earlier though. After tweaking the font size and the percentages in the code you gave me, I got the header to line up pretty well with the primary menu. But, for some reason, there is I strange pixel issue on the A of Astralingua in the site title. It shows up in both safari and chrome in the A. If I look at the site on my iphone, the pixel is below the A, but still there in a strange discoloration. I don’t understand what it is, but anything I tweak in the code to eliminate it messes up the alignment I achieved.

This is the site again – https://www.astralingua.com/makeitso

And this is the code I added:

#branding {
width: 40%;
}
#access {
float:right;
width: 60%;
}
#site-title span a {
font-size: 60px;
}
#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;
}

I hope that all makes sense! It’s a little thing but I imagine it is an easy fix, I just don’t know where to begin. I’ll try your suggestion on the social icons next and let you know if it works.

Thanks again,
Anne

Uh oh…. I seem to have done something critically wrong and lost access to everything just now. I was trying to follow your instructions and copied everything from the Tempera header.php file I went to the function.php section of my child theme and pasted it in as text, then saved.

Now everything is gone! I go to the website and nothing comes up. I go to wp admin and it is all gone also, nothing loads at all. What did I do and how to get it all back?

Trying not to panic ??
Thanks

Well I was able to undo what I did via file manager, but couldn’t edit my last post to delete it. But the site is back up. I guess pasting the header.php text into the functions.php file of the child theme was the wrong step. How do I do that?

Thanks

Just to let you know, your instructions worked and I now have the icons in my primary menu! And it is all in line thanks to the code you gave me above that.

I am still trying to figure out this random pixel/graphics issue. But it is small so if I can’t solve it I will survive ??

I am wondering if I can disable the top bar and add some spacing between the header/menu and the top of the page some other way. Right now if I have the top bar enabled, you can’t see anything unless you look at it via a mobile phone — then there is a horizontal line. I’d like to get rid of that by turning off the top bar and instead adding spacing so that the site title and menu don’t jump to the top of the screen.

is there an easy way to do that?

Thanks again for all of your help.