Tweaking Menu

[Sara]

Hello,

Just a few tweaks I need some help with:

1) How I can remove white line that shows under header and above primary navigation?

2) How I can change color from black to white the underline that shows under menu item when hover?

Thanks!

[Sara]

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!

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

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);

[Sara]

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

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!

[Sara]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

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!

[Sara]

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

[Tom]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sara]

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!

[Author]

Posts