Hi,
How do I do the following to the following sub nav (in the blue panel): https://firstcardev.wpengine.com/learning/
How do I make the blue background full width/to the edge of the screen?
Original – https://ibb.co/1LjMDTr
Proposed design – https://ibb.co/4VY5Cb9
How do I alter the size of the icons and the space between them and the titles
How do I centralise the text in the navigation? I have every setting set to centred but on mobile it is left aligned.
Hello,
I saw you have for mobile version the mobile theme plugin, if you want to use the mobile responsive version or mobile page, then you need to deactivate the mobile theme plugin.
To make full width, you need to select the row, select the viewport on phone => and set the margin left and right to -20 => https://www.screencast.com/t/p1QZxiyMEC
Also, please please send me what element you have on the nav.
Thank you!
Hi Anamaria,
Thank you, that has resolved most of the breakpoint issues. Are you able to help with the rest of my issues please?
How to centralise text in the text and how to adjust the space between icons and text.
Hello,
To adjust the space betttween image and tite you need to use this custom code => https://www.screencast.com/t/rJK7nhCRLjt
.tdb_header_menu .far {
margin-right: 15px;
}
For the mobile menu, you can use a custom code CSS, or you can create two menus, add a row and in that row add an inner row, and on each inner column, you can set a mobile menu and a menu.
The code needs to be set in the Theme panel -> Custom code -> Custom CSS => https://www.screencast.com/t/fxetQe24ZHf
Thank you!
I’m sorry, I don’t understand what you’re trying to say about the menus. Can you elaborate please and show me how to make the text centre aligned for mobile and tablet devices please.
I have added the custom css to increase the spacing between icon and title along with also adding 20px padding to the menus as seen here: https://firstcardev.wpengine.com/buying/
Hello,
I saw you have a different class of someone icons for the menu, and you need to add that class in the custom code CSS => https://www.screencast.com/t/MY7SPaJIc
.tdb_header_menu .fal {
margin-right: 20px;
}
And for the menu, you can use this custom code CSS and look like this => https://www.screencast.com/t/IiGMhALvHs
.tdb_header_menu .tdb-menu > li div {
font-size: 11px;
}
.tdb_header_menu .tdb-menu > li{
width: 50%;
}
.tdb_header_menu .tdb-menu > li > a {
display: block!important;
}
.tdb_header_menu .tdb-menu > li:nth-child(2n) {
float:right;
}
This code for the menu on mobile need to be set in Theme panel -> Custom code – > Advances CSS -> Phone => https://www.screencast.com/t/h3G040BAIuK
Hope this helps you!
Thank you!
Hi, thank you this looks great! I’m unsure why but it doesn’t appear to work when seen on Posts (on mobile)
Hello,
Please add this code next to the other code => https://www.screencast.com/t/JN4HqKFE57
.single .td-container-wrap .tdb-menu > li {
margin-right: 0px;
}
Thank you!
