Need to make random header image static on certain pages. Help!

Excellent! I inserted the code into the branding div and it has worked.

So I should now be able to use the featured images function on a page where I need a static image.

I know the menu isn’t quite right, as you pointed. The dropdown under exhibitors also doesn’t seem to be centered properly.

This is the CSS: https://pastebin.com/29hT72iD

I have tried to play around with text-align: center on the menu attributes but can’t seem to fix it.

Thank you very much indeed for your help.

So I should now be able to use the featured images function on a page where I need a static image.

Yep, that sould do it.
Your submenu is absolutely positioned, which means their position is relative to the position of the last relatively positioned wrapping element, which in this case is .menu li. It would be hard to center the submenu exactly, because the width of your main menu items is set to auto by default and it will change according to the size of the text in the link tags.

OK, I guess I will just leave the menu as it is if it going to be tricky to get it to align properly.

I also have an issue with the homepage. I need to get the FESTIVAL and NEWS areas to be equal in width.

The home page is set to the default theme template which features a twitter feed widget which I have renamed as the NEWS area.

Do you have any idea how I can make both columns equal in width? I have been trying for days!

I can’t seem to find how to control the width of the widget container. Perhaps it is in sidebar.php code: https://pastebin.com/CwMMsu3Y

Or in the widget CSS: https://pastebin.com/RZbVBaPj

This is the suggested CSS for editing the style of the widget: https://pastebin.com/aXzHgpKW

Please let me know if I can private message you. I feel I owe you for helping me out with all of these issues.

FYI. I came up with a fix (sort of) for the dropdown menu.

#access ul ul a {
	font-family: 'KorolevBold', Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	background: #000;
	color: #fff;
	line-height: 1em;
	margin: 0;
	padding: .80em .0em .5em 0em;
	min-width: 170px;
	height: auto;
	text-align: left;
	padding-left: 13px;

Cool. That seems to work well.

As for your columns, try the following lines of CSS:

1. Remove left and right margins for #header, so only the bottom 28px one remains;
2. Set the padding to 0 for #masthead and #footer;
3. Set the padding to 35px for .two-column #container;
4. Set the margins to 0 for #content-container, .content-sidebar #content, and .hentry;
5. Remove left padding for .hentry .entry-title and .entry-content, .entry-summary;
6. Float .content-sidebar #content to the left;
7. Set the width to 100% for .widget-container;
8. Set the width to 45% and display to block for .two-column #content and #primary; if you want to leave less space between both columns, simply increase the width of both divs slightly.

Thank you. I will give that a try in the morning.

The site is almost complete now ?? I just need to add a footer to the bottom of the pages which should be fairly straightforward.

In order to get my Facebook and Twitter icons positioned under the menu would I need to create a new div container and float it next to the div which holds the logo image? See example of icons here: https://www.circus11.com/social.jpg

I thought an easy way to achieve this would be to just add the icons to the logo image in Photoshop and then create an image map to turn the icons into links, but not sure this would be the correct/professional way to do it.

Could I simply add a new div to the header.php to position the icons?

A good way of adding social icons is with an unordered list wrapped by a div.
Something like this:

<div class="social_container">
   <ul id="social_media">
      <li class="social_item">
         <a class="social_link twitter">
            <img src="path/to/twitter/icon" alt="Twitter" />
         </a>
      </li>
      <li class="social_item">
         <a class="social_link facebook">
            <img src="path/to/facebookr/icon" alt="Facebook" />
         </a>
      </li>
   </ul>
</div> <!-- End #social_container

Would it work if I inserted this into my header.php and changed the img src paths?

I will give it a go and see what happens.

I’ll expect I’ll need to position it correctly to the left of my branding div.

Thanks,

Ollie

Yes, you absolutely must change the src values to your own image values. Those were just an example.
You can style this through CSS, which is why I added some classes and IDs for you to simplify things.

Hi Marventus,

It’s me again with another question! ??

I wondered if you could help.

I need to add Facebook and Twitter icons to the left of my JOIN THE CIRCUS button under the header image.

See example of what I mean: https://www.circus11.com/social_links.jpg

Here is a link to my header.php which is where I think this area of my site is controlled: https://pastebin.com/adiWBKRw

Thanks in advance for any help you can give! ??

Is it as simple as putting the social media icons in <div class=”button”> and floating them left?

Hi,

The site is looking nice, ??
If you are going to use a hover effect similar to the Join the Circus button, then I would recommend not to insert the images as img tags, but rather set them as background images of your <a> elements.
Also, the code for the button is, indeed, in header.php. Just look for this code inside the file:

<div class="button"><a href="https://www.circus11.com/?page_id=85">JOIN THE CIRCUS</a>
</div>

Since your button is 27px high, I would make the icons 27x27px (or 32x32px max), so they align with the button.

As for the code, try replacing the HTML code for the button with something like this. You should also add the following CSS code.
The idea for these CSS styles is for you to merge them with the ones you already have there, always keeping the new version (mine) for conflicting or identical properties. Please notice that I changed the class name of the “Join the Circus” button from button to join-button, so you will have to change that in style.css too.

That’s extremely helpful. Thank you.

I managed to get it to work using the code you supplied. However, the icons seems to be a little difficult to click on when hovering the cursor over them. Any ideas as to why this is happening?

I changed the code slightly by using ‘a href’ in order to get the icons to link to the correct URLs:

`<li class=”social_item facebook”>
<a href=”https://www.facebook.com/circus2011″>Facebook</a&gt;

<li class=”social_item twitter”>
<a href=”https://www.twitter.com/circuseleven”>Twitter</a&gt;`

Is this ok or is it bad practice?

I also wanted to see what the icons looked like to the right hand side of the join-button. I tried changing all float values to ‘right’ in the CSS, but it did not have the desired effect.

Thanks again for your help on this.

Yeah, you have to specify an href attribute. Sorry I didn’t make that explicit.
Also, your social_icons UL is inheriting a left margin that is preventing it from aligning with the rest of the elements on the page, so if you want to have it aligned, add:

margin: 0;

to the #social_container ul selector.

To move the icons to the right, in that same selector, you need to change:

left:0;

To:

right:0;

And keep the floats to the right so that they align properly. However, that will change the order of your icons: it will show the Twitter icon on the left, and the Facebook icon on the right. If you want them as they were before, just invert the order of your <li> tags in the HTML (i.e., Twitter first, then Facebook).