[bradm413]

Thanks! I tried searching there first (and I didn't see a way to join their forums), but I didn't find anything. Maybe I just wasn't searching for the right things...?

Thanks

[bradm413]

I know this thread is old, but it's the exact same issue I'm facing now.

When I click an anchor link from a different page, the section I'm navigating to gets hidden behind the header. However, if I'm already on the page with anchors, it navigates properly and shows the anchor section below the header -- like I would anticipate.

It seems like it has something to do with the header resizing once you start scrolling down the page. I've been looking at this for a couple of days now, and I think I could use a point in the right direction.

Is there something I can set so that anchor links from a different page behave more like they do when you're already on that page?

I don't have a live site with an example of this yet, but I can try to get one up if that would be helpful. Right now I'm just working on it with my hosts file pointed.

Thanks!

[bradm413]

You're a genius! You saved me a lot of time and staring at my screen 😀

Here are the rules I ended up with, and they seem to do the trick:

.site-header,
.header-image .site-header {
	width: 100%;
	z-index: 999;
	padding: 2rem 0;
	position: relative;
	background: #cb3309;
}

@media only screen and (min-width: 800px) {

	.site-header,
	.header-image .site-header {
		padding: 3rem 0 2.5rem;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #cb3309;
	}
}

/* keep transparent header on home page only */
.home .site-header,
.header-image .site-header {
	width: 100%;
	z-index: 999;
	padding: 2rem 0;
	position: relative;
	background: transparent;
}

@media only screen and (min-width: 800px) {

	.home .site-header,
	.home .header-image .site-header {
		padding: 3rem 0 2.5rem;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: transparent;
	}
}

[bradm413]

I have another example of this (actually the live implementation of it) here:

https://beyouniquedesigns.net

[bradm413]

Thanks!

[bradm413]

Thanks for the info. Do you know if there are any plans for StudioPress to add this feature to existing themes? I suppose we would just hear about it through their email list/blog post...?

[bradm413]

Hi Victor,

Thank you for always responding and helping so graciously those of us who aren't to your level yet 🙂

I am just getting into responsive design coding, but I have done a little research on W3schools and I think I grasp the concept.

Would it be possible to make this the original "icon" when the screen size is within this class: @media only screen and (max-width: 600px) ?

Another thought I had was to hide that button if it's below 600px and then reveal a menu item that is only visible below 600px screen size.

Any thoughts on that and what would be best practice?

[bradm413]

Thanks! This worked great!

[bradm413]

Thanks, Henrik! Your first solution was the one I was looking for!

.full-width-content .content {
    border-right: none;
    float: none;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 840px; */
    width: 100%;
}

[bradm413]

Hi Victor, thanks for the reply. I have setup a test site that has BB installed:

http://test.genesisbay.com/about

Technically, though, the way I'm currently using BB is to just add "content" inside the available container on the page. BB is only working within that middle content section, so I figure if I can expand that, I should be able to achieve what I'm going for.

Thanks!

[bradm413]

Just checking to see if anyone had any insight on how to do this. 100% main content area

[bradm413]

Ok. Thanks for your help.

[bradm413]

Alright, sounds good. And then if I ever updated the theme in the future, I'd just have to make that change again? Or is there any way to future-proof a customization like this?

[bradm413]

Hi Victor,

Yes, I think the route I need to take is to make that page width 100% and then use margins/padding to space things correctly. I attempted to do it myself with the following CSS but it didn't seem to work:

.full-width-content .content .site-inner {
    max-width: 100%;
}

I've tried some other variations that didn't seem to do anything either. My approach is usually to view the page, then use the browser's built-in tools to "inspect element", and then try to find which CSS to edit. Usually I can figure it out, but I think I'm missing something major here.

Is my approach the best way to figure out these kinds of edits? And what did I miss?

Thanks!

[bradm413]

Thanks. I wasn't sure if there were any themes that were optimized or had special features for either of these (bbPress or BuddyPress).

[bradm413]

Actually, nevermind 🙂 I found a way within Beaver Building to achieve this. I can set custom CSS for a particular page, so I added this to the pages I wanted to be full width:

.content .entry {
	border: none;
	margin: 0 0;
	padding: 0 0;
}

that appears to be working now! Thank you, Victor for all your help on this!

[bradm413]

Just checking if anyone had an idea of how I could achieve this?

How can I get the middle section to be 100% width and extend all the way from the header to the bottom to touch the footer?

http://test.genesisbay.com/test

[bradm413]

Thank you for your help! That worked great.

Now the only thing left is that there still seems to be something that is not set to 100% width on a page.

I should probably also mention that I'm using Beaver Builder to add elements to the pages. I went ahead & setup a test site that exactly mirrors what I'm trying to do on my new client site:

http://test.genesisbay.com/test

How can I get the middle section to be 100% width and extend all the way from the header to the bottom to touch the footer?

Thanks!

[bradm413]

Thanks! I searched, but obviously I didn't search well enough. 🙂
Have a blessed day!

Brad

[bradm413]

Looks good! And I like your helpful articles about Genesis stuff. I'm new to freelance web design/development, so I don't have much input on your pricing table, but it all looks good 🙂

[Author]

Posts