Highlighted

How to center this nav bar

New Here ,
Sep 17, 2018

Copy link to clipboard

Copied

I'm pretty new to responsive design, just working my way into it. I cannot figure out how to center the top navigation on this page. I feel really stupid for having to ask this.

Kowa TSN-553 Scope Review — Birdwatching Dot Com

Adobe Community Professional
Correct answer by anissa_thompson | Adobe Community Professional

Take a look at your CSS for your .nav-main a declaration - you can add a text-align:center; to the list, and adjust the left padding and/or margins of the li tags in that list.

Views

676

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to center this nav bar

New Here ,
Sep 17, 2018

Copy link to clipboard

Copied

I'm pretty new to responsive design, just working my way into it. I cannot figure out how to center the top navigation on this page. I feel really stupid for having to ask this.

Kowa TSN-553 Scope Review — Birdwatching Dot Com

Adobe Community Professional
Correct answer by anissa_thompson | Adobe Community Professional

Take a look at your CSS for your .nav-main a declaration - you can add a text-align:center; to the list, and adjust the left padding and/or margins of the li tags in that list.

Views

677

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 17, 2018 0
Adobe Community Professional ,
Sep 17, 2018

Copy link to clipboard

Copied

Take a look at your CSS for your .nav-main a declaration - you can add a text-align:center; to the list, and adjust the left padding and/or margins of the li tags in that list.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2018 1
Adobe Community Professional ,
Sep 17, 2018

Copy link to clipboard

Copied

On a side note,  that table is going to prove challenging for mobile and tablet users because tables are not responsive in smaller viewports.    Had you used a Bootstrap Starter Template, the tabular data presentation would be more user friendly.   https://getbootstrap.com/docs/4.0/content/tables/

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2018 1