create a layout, header, navigation

mikha
mikha used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
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

Author

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 ?
Ensure you’re charging the right price for your IT

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

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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.

Author

Commented:
@scott -thanks again.

Do you an example of hiding columns as well ?
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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.
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/

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial