Tweaking Menu

Also one last thing that would be

3) How I can make for menu to show full width? but I mean more width than container?

Thanks!

Hi there,

1. Remove this CSS from Additional CSS field in the customizer:

.main-navigation .inside-navigation {
    border-top: .5px solid #d4d7d8;
}

2. Change the hex color code of this CSS:

.main-navigation ul li:after {
    background-color: #000;
}

3. Remove this CSS:

@media (min-width: 769px) {
    body {
        margin: 0 30px;
    }
}

Let me know if this helps :)

Hello,

1) Done

2) Done

3) is not working correctly it seams there some errors on theme css there the following:

@media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr auto;
    }

 .main-navigation ul li:after {
        content: '';
        position: absolute;
        height: 0;
        width: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        filter: hue-rotation(90deg);
        -webkit-filter: hue-rotation(90deg);
        -webkit-transition: height 0.35s ease;
        transition: height 0.35s ease;
    }

Warning comes on this line:
filter: hue-rotation(90deg);

Also what I wanted to do on point 3 is just to make menu fullwidth leave content as it is if possible

3. Can you disable Autopimize so I can see the source of the code better?

You need to make sure every { has a } to close.

Hello,

I have disable autoptimize as you asked and also, what I want is just to make content also to be as width as menu and footer is now which is full width, how can I achieve that?

Also if you can please check css errors showing on lines 214 and 215 which is the code I mention on previous post.

Thanks,

Sara

Hi there,

3. You can safely ignore the warning as its just that WordPress CSS parser doesn't include it - you can even delete that property if you want - its effect is very subtle.

You can increase the Container Width in Customizer > Layout > Container

Ok then how I make both menu and container same size and full width? Since I dont know what would be size in pixels to edit it on customizer as you points out.

Thanks!

Because on desktop is not showing menu and footer full width there is some space between sides and container is showing as normal size not full width

OK - so it looks like you may have some left over CSS from a different site import.
Go to Customizer > Additional CSS and remove this block of code:

@media (min-width: 769px) {
    body {
        margin: 0 30px;
    }
}

body.single-post.no-sidebar .site-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

This will remove the white space either side of the header and footer.

The Header and Footer content is both set to Full Width in Customizer > Layout > Header ( and Footer respectively ).

So now for the Content - Options:

1. Customizer > Layout > Container - this sets the global content container width.

or

2. Appearance > Elements >>> New Layout Element - here you can set Full Width or Content Width for specific posts / pages / archives etc. this will override the setting in #1.

https://docs.generatepress.com/article/layout-element-overview/

So to make just the Home page full width.
Create a new Layout Element, select Full Width for the Content and set your Display Rules to Front Page.

For Menu it seems to be working solution but for content, I tried to create a new element and did not work.

Did the following settings on element:
Type: Layout

Sidebar: Default
Footer: Default
Disable Elements: No Options Selected
Content: > Content Area: Full Width (no padding)
Display Rules: > Location: Entire Site
> Exclude: Nothing
> Users: Nothing

Internal Notes: Nothing

What I am doing wrong?

Thanks!

Also there is new problem it seems that now slider is overlaping with content listing in homepage

Hi there,

It looks like that Layout Element is working - all of the pages I looked at are full width.

I'm not sure I'm seeing a slider on the home page? Did you resolve this?

Hello Tom,

Yes, I see slider on homepage but, the problems are the following:

1) Slider is not full width

2) Slider is overlaping on top of firsts posts on posts listing.

3) I would like to add some space on the sides (right and left) like 20pix or 15pix so it shows content more clean.

How can I fix this issues?

Thanks!