[Support request] border-radius footer (right-side of screen issue)

[keiron]

Hey Guys,

I am currently considering editing the style of my primary nav and footer and am looking to use the border radius css to change the shape of these sections. As you can see the border radius for the primary navigation works fine and fits on the screen but it seems as though the footer stretches out longer on the right side of the screen meaning the radius does no appear symmetrical.

[Tom]

Hi there,

Try adding this CSS:

.site-info {
    box-sizing: border-box;
}

Let me know 🙂

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

[keiron]

perfect, thankyouu! is it better to use this for .site_info or .site-footer?

[David]

Hi there,

.site-info is better for your needs as .site-footer would also include any footer widgets, which you don’t have.

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

[keiron]

brilliant. In reference to the copyright. What would i do if i wanted the bar at the bottom (currently containing copyright) to contain icons such as account login or social media icons and wanted the the copyright to be at the bottom of the scroll down page?

[keiron]

im thinking specifically in reference to mobile and tablet users

[David]

You can add content to the site-info by using Widgets in the Footer Bar widget area. Will require a little CSS to position once they are in place.

So the these icons will remain fixed? But the site-info is only to be displayed on scrolling to bottom?

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

[keiron]

exactly. these icons fixed, site info at the bottom.

[keiron]

No problem, I have worked it out, I have created a secondary menu and used the same css as that was used for .site-info to plant it at the bottom. All good, thanks for the help!

[keiron]

One thing i need to prevent it from doing though is becoming full toggle menu. is it possible to have the social media icons either side of the menu toggle in the centre? Also when you press the toggle, the x is in the centre and the links seem to float to the right. I think this may be in part due to the border radius i have set for the secondary navigation – with the slideout menu in the primary nav i can seperately adjust the slideout section with “#generate-slideout-menu {}” however i cannot find an id or class for the same slideout section in the second navigation bar when i inspect. I am wondering if this is the cleanest way to create this menu by fixing it to the bottom:0 with css or it is better done on the backend? I dont want unnecessary code slowing down such a fast theme.

Sorry for the essay, just want to make sure i am constructing this in the best way possible.

Keiron.

[David]

So what design would you ideally want?
E.g
A Horizontal Menu on desktop and mobile ( no toggle ) and a social icon either side of that?

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

[keiron]

if you look at my site using a mobile or with a small screen currently, you will see the bottom menu. What I am looking to do is potentially (it seems like it might be difficult) have several icons across the menu at the bottom. I will then use sub-menu items to add slide up options for each icon like the transition option provided by the menu toggle. As you will be able to see i currently have some sub-menu items in the menu when you use the toggle. I want the icons to work how the toggle currently does.

so to break down tasks.

1. remove toggle in bottom menu
2. add icons (font awesome will work)
3. add sub menu items
4. css code to have these icons slide up like the menu toggle currently does to reveal sub menu items centrally in the space.

[David]

i have been thinking on this one, its quite complicated and i don’t think its do-able without custom Javascript and CSS to create custom ‘toggle’ icons and dropdowns.

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

[keiron]

So even using font awesome icons for the menu items then sub menu items attached to these. There is no way to prevent the mobile toggle activating at smaller screen sizes then customizing the sub menu items to slide up like this from the menu icons? :/

[David]

If you want to set-up the menu using the icons with the submenus then i can have a play. Sometimes the solution is easier when i can see the full markup.
This article covers using Icons in the menu, you may find it useful:

https://docs.generatepress.com/article/adding-icons-to-menu-items/

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

[Author]

Posts