nav bar over the page?

Hi again,
Looks like CSS will get you closer to that – change the background to your green image:

.main-navigation {
    background: none repeat scroll 0 0 red;
    margin: 0;
    padding: 20px 0;
}

Hi again,

well, I tried your suggestion and what happened is that it is still on the ‘page’ not background.

Basically if you check my site now https://blog.c-major-music.com/ you’ll see no navigation even though the div of main navigation shows up in firebug. I need the navigation bar where it is right now, only visible. I need to make it visible because the end result has to be like https://test.dacesita.com/

I also tried to remove background image of the site and set the background color to ‘transparent’ to find out where the nav bar disappears, yet it didn’t show up even then (I’m not sure though if WP deals with ‘transparent’).

I can’t set the navigation background the same as the green background image because
<li>s have their own background images. I saw what you mean with red background, however when I inserted the background picture instead of red color, the background was still white…

this thing starts to drive me nuts slowly. ??

thanks!

[Moderator note: Please wrap all code in backticks]

You have this CSS:

.main-navigation {
    margin: -5rem 1rem 1rem 0;
}

That’s moving it off the visible space.

Yes, WP uses CSS just like any other website – transparent like any other style.

I understand what you’re saying. However, I need it there and not on the white background. I have this CSS specifically to get the menu off the white area unto the green background image. And I want it to be visible there, not on the white background. As I said, it has to be like on https://test.dacesita.com I adjusted it there with margin and it puzzles me why it’s not possible here, too.

I see only two options there: 1) I make it visible where it is or 2)I do something to the white background that it is not white underneath the navigation bar. I assume the 1) is easier than the 2). I have no idea how to pull off the second option if I’d had to…

You don’t need to use CSS at all if just move the <nav> element outside and above the <div id="page"> element.

Yeah! That worked! Bringing it above the page div did the trick. thank you!

However, I got new problems after that… I don’t know if I should ask it in this thread or open a new one.

I am using a child theme, however, here is the interesting thing – if you go on the site now you’ll see two white lines on top and below the navigation. And all letters in Nav bar are uppercase. Here is the problem, when I check the element, it shows me that this is active:

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}

and that this is active:

.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;

the only problem is that this is not to be found in my style.css of the child theme I edit. It seems like it’s pulling it off the original stylesheet for some reason. Why? OMG

Sorry, I don’t see those white lines. Is it only occurring on a particular browser?

do you see uppercase though?

Well, I work on chrome, but I also see it on firefox and IE. ??

Nope
https://awesomescreenshot.com/07b11dmn04

(using chrome)

well… this is the “original” website. I am speaking of blog which is https://blog-c-major-music.com

The website was done from a template and the blog is based on WP.

sorry for confusion.

the only problem is that this is not to be found in my style.css of the child theme I edit. It seems like it’s pulling it off the original stylesheet for some reason. Why? OMG

Well, you are @importing the original theme’s styles aren’t you?
Styles will always be included in your Child Theme from your parent theme. If you don’t want a particular style, you override it by creating a new style in your Child Theme.

I am importing, but I already eliminated all lines and uppercases… and the problem was not there before I moved the navigation…

basically, the values have already been adjusted in child theme for the exact same elements.

that’s the issue.

and the problem was not there before I moved the navigation…

CSS is dependent on a particular HTML structure.
Your previous CSS overrides will have to adapt to the new HTML structure.

okay. basically, because it’s out of the page div, the original css file applies. so what is the solution?

do I have to write a second child theme then?

or is there a diecent way to write it in the existing one?

Well, I just removed @import from my child theme since I’ve had so much to adjust there that I basically have copied the original CSS into the child theme.

Or is it gonna mess it up sometime down the line?