Change Menu Position

Hello,

I use theme Sydney and I just love it.
I started to use Menu system and I would like to ask some help.

  1. I would like a Menu with two options, one is left aligned, the other is right aligned. Similarly as in the Demo (title “Sydney” and the “Blog, …”). Where or how can I set this structure?

  2. I made some changes on my website and I created an own section above the classic header. Could you give me some hint what should I modify if I want, the Menu start from the normal header location and not from the top of the webpage? Should I modify the CSS or the PHP? And if the PHP then around where?

Webpage: http://programozzteis.hu/

Thanks in advance!
Tamas

Hello Tamas,

Inspecting your site, It seems like you added new code in the site header which look like this:


<header id="colophon" class="site-footer" role="contentinfo">
<p style="text-align: center; margin: 0px;">
  <span style="font-size: 38px;"><a href="http://programozzteis.hu/" rel="bookmark">Programozz Te Is!</a></span>
  <span style="font-size: 20px;"><em> - egy blog a programozás rejtelmeiről</em></span>
</p>
</header><!-- #colophon -->

Just for information, you don’t need to add any new code to display the site title and description. It can be set from your site dashboard, under the Settings menu > General > Site Title & Tagline.

Regards,
Kharis

Hello Kharis,

Ahh okay, good to know, thanks :slight_smile:
But I just realized, maybe I would keep my custom header.

About the second point, the top position of the Mainnav, do you have any suggestion where should I modify the code to place the Mainnav, from the top of the normal header not from the top of the page?

Thanks!
Tamas

In the header.php file, replace this line:


<div class="col-md-4 col-sm-8 col-xs-12">

with:


<div class="col-md-12 col-sm-12 col-xs-12">

Then place your code immediately after this line. So it will look like this:


<div class="col-md-12 col-sm-12 col-xs-12">

	<p style="text-align: center; margin: 0px;">
		<span style="font-size: 38px;"><a href="http://programozzteis.hu/" rel="bookmark">Programozz Te Is!</a></span>
		<span style="font-size: 20px;"><em> - egy blog a programozás rejtelmeiről</em></span>
	</p>

Then add the following CSS code into your child theme’s style.css.


.site-header {
  background-color: #000;
}

Regards,
Kharis

Hello,

Thanks the infos, it worked! :slight_smile:
Solved.