create a layout, header, navigation

what would css classes look like for the header, mainmenu classes  , if I want to equal space between the li elements in following construct.

also , if mainmenu div appears at the bottom of the header, and is centered, of the header div.

I'm using bootstrap , so I have wrapped everything inside the container class, but I don't want to use navigation classes from bootstrap.

<div class="container">
   <div class="header">
      <div class="mainMenu">
        <ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Help</a></li>
         </ul>
      </div>
    </div> ----end of header

     <div>
       ---content----------------------
   </div>
</div>

Open in new window

mikha eAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
The navigation / menu is not only CSS it is also Javascript.
The navigation that come with Bootstrap is very basic.

Such mechanism is complicated (Reponsive media queries, nice looking CSS, Javascript)
To save time I recommend you to use a ready solution at low price
https://codecanyon.net/search/bootstrap%20navigation?sort=trending
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It would be easier to start with an example of what you want. What is it about the bootstrap nav you don't like?  Did you look at this example? https://getbootstrap.com/docs/4.0/examples/blog/

<nav class="nav d-flex justify-content-between">
          <a class="p-2 text-muted" href="#">World</a>
          <a class="p-2 text-muted" href="#">U.S.</a>
          <a class="p-2 text-muted" href="#">Technology</a>
          <a class="p-2 text-muted" href="#">Design</a>
          <a class="p-2 text-muted" href="#">Culture</a>
          <a class="p-2 text-muted" href="#">Business</a>
          <a class="p-2 text-muted" href="#">Politics</a>
          <a class="p-2 text-muted" href="#">Opinion</a>
          <a class="p-2 text-muted" href="#">Science</a>
          <a class="p-2 text-muted" href="#">Health</a>
          <a class="p-2 text-muted" href="#">Style</a>
          <a class="p-2 text-muted" href="#">Travel</a>
        </nav>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mikha eAuthor Commented:
@Scott  - thanks. this was helpful. looks like the new bootstrap has more flexibility. I am very new to building layouts and design.
the example you provided is very good. one more thing I'm not sure about is , when we design layout of the page, now we can use bootstrap
navigation, container and grid system, which automatically adjusts based on the device or width of the screen.

if I have a table that I don't want adjust based on the screen, what's the best way to do this. set a fixed width for the table?
will this be possible , if i want to use bootstrap grid to create a table ?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can use tables, https://getbootstrap.com/docs/4.1/content/tables/

In some cases, you may want to hide columns on small screens though.
0
mikha eAuthor Commented:
@scott -thanks again.

Do you an example of hiding columns as well ?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For this question, let's stay on topic of your navigation. Getting into tables would be best for a new question thread to keep things separated and in order.
0
lenamtlCommented:
Hi

Here you will have different menu setup with the basic Bootstrap
https://getbootstrap.com/docs/4.1/examples/navbars/
to get the code just right click, view page source

for table you can use Datatables that have all the features like hiding column and have Bootstrap theming  https://datatables.net/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.