Menu and Sidebar Issues
-
Okay, I’m having real trouble with CSS. All my experience is in HTML and I think it’s hindering my ability to learn this stuff. But okay!
I want my blog background to also be my menu background, I’ve been searching the forum for hours to find the code to this, but it’s becoming quite clear to me that the answer to these problems are very theme specific and since my theme: Highwind, is very new, there are few answers to such problems.
The problem with my sidebar is that I want to be able to control the opacity of my sidebar, to decrease it.
Help?
Also, I seem to turning to these forums for all CSS help. Since I can’t seem to get the hang of it, should I just… forget about the upgrade?
The blog I need help with is: (visible only to logged in users)
-
**I thought about simply decreasing the transparency of my blog menu, to allow the background to show underneath, like I want to do with my sidebar, but I’m not sure that’ll work.
-
Hi there,
Looks like you’ve set your sidebar to be the same color as your blog background. Are you all set? I’m happy to help you with any other css questions or problems you encounter.
Cheers,
Mel Choyce | WordPress.com -
Hello, Mel Choyce,
Thank you for responding. :)
And actually, no, it’s not set to the same as my blog background. My sidebar and menu is solid black, but my background is a really dark black and gray pattern.
I’d like to make the sidebar and menu that same dark gray and black pattern. I thought that perhaps the easiest way to do that would be to lower the opacity for both the sidebar and menus.
Could you supply me with the code for that?
-
Whoops, didn’t notice the pattern at first! Sorry about that.
You can set your sidebar to be transparent using this code:
#secondary {
background-color: transparent;
}Since your menu can overlap other content, you’ll want to use this code for it:
.main-nav .menu {
background: #0D0D0D url(‘http://auteurati.files.wordpress.com/2013/10/black-patterns-deviantart-classic-damask-1366×768-wallpaper_wallpaperswa-com_22.jpg’) repeat;
}That will apply the same background image you’re using for your body to your menu.
Let me know if these work for you!
-
Thank you! That did indeed work.
The only problem:
Can I just… decrease the sidebar’s opacity instead of getting rid of it completely?
And the background image did do it but not all the way across. The two sides are still solid black.
But you’ve been brilliant so far, thank you for your help. :]
-
Sure, if you want to just drop the opacity down a little, try this:
#secondary {
background-color: rgba(0, 0, 0, .75);
}The last number there (.75) is the opacity, so in this case, it’s 75% opaque. You can adjust that number to get it however transparent you’d like it.
For the menu — sorry about that! Looks like that background code should be “.admin-bar .main-nav” instead to span the full width of your page. The new code for that looks like this:
.admin-bar .main-nav {
background: #0D0D0D url(‘http://auteurati.files.wordpress.com/2013/10/black-patterns-deviantart-classic-damask-1366×768-wallpaper_wallpaperswa-com_22.jpg’) repeat;
}Hope this helps!
-
-
Nevermind! It didn’t work in the preview, but as soon as I saved the sidebar changes, it came up on the live site.
Thank you so much so much for your help.
You are a genius. :]
-
-
Yeah, you’re going to hate me, but I switched to another theme, one that suited my purposes a bit better.
I wanted to use the same CSS code, but it’s not working which I knew was a long shot.
Do you know how to make certain posts full-width with no sidebar?
Also, how do I make the menu items bigger. They’re really small.
Sorry! Haha… you have my permission to talk about me to your coworkers, lol.
-
Not a problem. :)
Since you’re using a different theme, some of the code is different now. If you’re using Chrome, it’s really easy to check out the code behind each section of your site by right-clicking on the thing you want to look at (so your sidebar, or a particular header) and selecting “inspect element.” That will bring up a panel that shows you your site’s HTML on the left, and CSS on the right.
So, for example, if you wanted to increase the size of your menu items, you can right click on one and inspect element to bring up this panel: https://cloudup.com/c2HUjNXQd44
On the right, you’ll see this css, which includes the font size: https://cloudup.com/c52KjbY5nFh
You can adjust the size right there in the panel to preview how it would look live, then copy and paste that code into your CSS editor in the Customizer, like this:
.main-navigation a {
font-size: 1em;
}FYI — Most of our CSS support is done in our community forums by both staff and volunteers: https://en.forums.wordpress.com/forum/css-customization The forum is the best way to get quick help with CSS edits.
Unfortunately, individual posts cannot be full-width — their layout is determined by your theme. You can change page templates, however. To make a full-width page, go into your page editor and find the Page Attributes box. Then, under “Template”, select “Full-Width Template” and update your page. It should now just be one column, without a sidebar.
-
Yes! That did indeed make the menu bigger, thank you, but it lost its font. Ideas?
And really? Are you sure? Because with the last theme, I was able to take away the sidebar and expand the width in a post with a css code. This is the code they gave me.
.postid-3052 #secondary {
display: none;
}.postid-3052 #primary {
width: 100%;
}.postid-3417 #secondary {
display: none;
}.postid-3417 #primary {
width: 100%;
}It totally worked. But it’s not working with this theme which doesn’t surprise me.
And I’m confused about something. Is this private support? This isn’t the community support? Because I try not to bother you good people unless someone in the community can’t help me.
If so, I’m sorry about this. I didn’t mean to make you my personal theme fixer-uper, lol.
-
Ah! I didn’t even think about doing that, but it totally makes sense. In this theme, you’ll want to use #single-primary instead of #primary. It looks like #secondary is the same.
Right now you’re in the Staff Answers forum. The CSS Customization forum is frequented by both users and staff members.
-
Seems we’re both learning from one another.
:]
And I’m so sorry for my ignorance on so many things. I know HTML like a whiz, but CSS escapes me. It really does.
And I need a lot of help, but it’s just small stuff, you know? I would take the time to learn it, but I’m so busy and my blog has so much traffic (for its content) that I really don’t want it looking shabby, you know?
So, really, thank you for traveling with me.
Also… should it look like this?
.postid-3052 #single-secondary {
display: none;
}.postid-3052 #single-primary {
width: 100%;
}.postid-3417 #single-secondary {
display: none;
}.postid-3417 #single-primary {
width: 100%;
}Gosh, I feel like such a dummy… because that didn’t work.
-
Sorry, my #secondary direction was unclear. Should be:
.postid-3052 #secondary {
display: none;
}
.postid-3052 #single-primary {
max-width: 100%;
}Looks like this theme also uses max-width instead of width. :)
Also, happy to help! CSS is a totally different beast than HTML, it took me a lot longer to pick it up.
-
Thank god. That makes me feels loads better.
So… it won’t bother you if I ask you a few more questions?
Lol, then I promise you won’t be getting any emails from me for awhile.
The menu isn’t retaining the font selection which is bad. Also… can I decrease the unnecessary spaces in my sidebar? My pics are like a mile from the content it’s supposed to go with.
-
Okay, nevermind, I lied. It is retaining the font, it’s just hideous… lol.
Can I change menu font? Or does that require typekit?
-
What font do you want to change your menu to? You can experiment using:
.main-navigation a { font-family: whatever-you-want-here; }
Here’s what it looks like if you use the same font stack (etica-display-1, etica-display-2, raleway, sans-serif) as your headers:
https://cloudup.com/ce6pPN5pRNO.widget { margin: 0; } decreases some of the extra space in your sidebar.
-
YES! That picture is exactly what I want! =]
So the code would be this??:
.main-navigation a { font-family: raleway; }
Or rather, is it this?:
.main-navigation a {font-family: etica-display-1, etica-display-2, raleway, sans-serif; }
I did both versions and they worked, but it wasn’t thin like in the picture you sent me, which is what I’d prefer.
One more thing, then I’m going to release you, Ms. Melchoyce and not haunt your doorstep again, lol.
In this theme, the sidebar headings matches the top menu navigation color.
Can I change that to make it darker? For instance, I like my header to be the light pink, but would like to make the sidebar headings a darker pink or whatever color.
After that, I think I’ll be set.
And I thank you so much for your help.
I have a big test on Saturday, but after that I’m going to have time to take a crash course in CSS editing which I will do, so hopefully, you won’t be seeing anymore of me.
:]
- The topic ‘Menu and Sidebar Issues’ is closed to new replies.
WordPress.com Forums 