- This topic has 34 replies, 3 voices, and was last updated 5 years, 1 month ago by David.
-
AuthorPosts
-
February 19, 2019 at 12:57 pm #814913keiron
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.
February 19, 2019 at 5:37 pm #815025TomLead DeveloperLead DeveloperHi there,
Try adding this CSS:
.site-info { box-sizing: border-box; }
Let me know 🙂
February 20, 2019 at 12:41 am #815199keironperfect, thankyouu! is it better to use this for .site_info or .site-footer?
February 20, 2019 at 3:30 am #815313DavidStaffCustomer SupportHi there,
.site-info
is better for your needs as.site-footer
would also include any footer widgets, which you don’t have.February 20, 2019 at 3:47 am #815331keironbrilliant. 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?
February 20, 2019 at 3:56 am #815337keironim thinking specifically in reference to mobile and tablet users
February 20, 2019 at 5:10 am #815393DavidStaffCustomer SupportYou 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?
February 20, 2019 at 6:17 am #815446keironexactly. these icons fixed, site info at the bottom.
February 20, 2019 at 6:23 am #815447keironNo 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!
February 20, 2019 at 6:27 am #815448keironOne 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.
February 20, 2019 at 8:59 am #815727DavidStaffCustomer SupportSo 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?February 20, 2019 at 9:13 am #815743keironif 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.February 20, 2019 at 11:51 am #815908DavidStaffCustomer Supporti 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.
February 20, 2019 at 12:07 pm #815914keironSo 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? :/
February 20, 2019 at 1:13 pm #815959DavidStaffCustomer SupportIf 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/
-
AuthorPosts
- You must be logged in to reply to this topic.