Tips for applying color to a complete div within a fixed header while positioning the text in the center

I have a header with row elements that are filling it completely using the class "col-xs-2". I am trying to fill the color for one specific "col-xs-2" element and center the text within it. However, the color is only filling the "col-xs-2" div. Can someone assist me in achieving the desired effect?

https://i.sstatic.net/cZGPs.png

The elements ABOUT, B1, LEVEL1, etc. each occupy one "col-xs-2" element.

https://i.sstatic.net/kF17O.png

I want the ABOUT div to completely fill the space instead of just half, and I also want to center the text within it.

Here is the code snippet:

<div class="navbar navbar-default navbar-fixed-top text-center">
        <div class="container-fluid">
            <div class="row">
                <div ng-class="page=='about'?'active':''"  ng-click="changePage('about')" class="col-xs-2 active">ABOUT</div>
                <div ng-class="page=='b1'?'active':''"  ng-click="changePage('b1')" class="col-xs-2">B1</div>
                <div ng-class="page=='level1'?'active':''"  ng-click="changePage('level1')" class="col-xs-2">LEVEL 1</div>
                <div ng-class="page=='level3'?'active':''" ng-click="changePage('level3')" class="col-xs-2">LEVEL 3</div>
                <div ng-class="page=='level5'?'active':''" ng-click="changePage('level5')" class="col-xs-2">LEVEL 5</div>
                <div ng-class="page=='level16'?'active':''" ng-click="changePage('level16')" class="col-xs-2">LEVEL 16</div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div ng-if="page == 'about'" ng-include="'./html/about/about.html'"></div>
                <div ng-if="page == 'b1'" ng-include="'./html/about/b1.html'"></div>
                <div ng-if="page == 'level1'" ng-include="'./html/about/level1.html'"></div>
                <div ng-if="page == 'level3'" ng-include="'./html/about/level3.html'"></div>
                <div ng-if="page == 'level5'" ng-include="'./html/about/level5.html'"></div>
                <div ng-if="page == 'level16'" ng-include="'./html/about/level16.html'"></div>
            </div>
        </div>
    </div>

Main.css

/*Header*/
.navbar-fixed-top{
  background: #EBE9DB;
  border-bottom: 1px solid lightgrey;
}

.navbar-fixed-top .active{
  background: #1AA0DE;
  color: white;
}

Current Output: https://i.sstatic.net/Pck6z.png

Expected output: https://i.sstatic.net/fwx2m.png

Answer №1

To ensure consistent spacing throughout the columns, consider creating a CSS class to control padding for the div elements.

.no-margin {
   margin: 0;
}

Then, apply this class in your HTML structure like this:

<div ng-class="page=='services'?'active':''"  ng-click="changePage('services')" class="col-xs-3 active no-margin">SERVICES</div>

Repeat this step for each div element as needed.

Answer №2

My approach to solving this problem was by setting the div height to the minimum height and then working through it step by step.

<div ng-class="page=='about'?'active':''"  ng-click="changePage('about')" class="col-xs-2 active nopadding">ABOUT</div>

Additionally, I included some CSS:

.padding{
  min-height: 50px;
  line-height: 50px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expand <a> to occupy the <li> element within the menu

Encountering a bit of a challenge... Is there a way to expand my <a> elements to completely fill the <li> containers they are placed in? I'm aiming to enhance the accessibility of the links for easier clicking. Check out my jsFiddle: htt ...

Utilizing Playframework in Scala to Connect a List/Sequence to the Controller

I am struggling to connect a list of input items on my webpage to my controller. This is how my form is defined: def clientForm = Form( tuple( "clients[]" -> seq( tuple( "firstname" -> text, "lastname" -> text) ) ) ...

What is the best way to vertically center all content, including borders, within the columns?

To view the codepen for reference, please click on the following link: http://codepen.io/rezasan/pen/apvMOR I am attempting to align all the content within the columns (Date, Title, and Button, including the separator) vertically. I have tried using displ ...

Unusual grey rectangle (similar to a selection tool) found in the top left corner of a contenteditable div on

I recently utilized Vue to create a contenteditable div on my website. However, I encountered an issue where a gray area appeared on the upper left corner when hovering over the div. Oddly enough, this problem only occurred in Chrome, while Safari and Fire ...

Separate JavaScript/ASP statements using commas

I'm having trouble comma-delimiting this line in JavaScript, as I keep encountering errors: <a href="javascript:doSubmit(<%= pound & rs("AdvertiserID")%>, <%=rs("AdvertiserName")%>)"> It's Friday, what can I say... The &l ...

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

Steps to creating an elliptical border using CSS

Is there a way to apply CSS styles specifically to the left border of a div to achieve an elliptical shape, while keeping other borders normal? I've managed to create a semi-ellipse with the following code, but the rest of the border remains unchanged ...

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

The public folder in Node.js is known for its tendency to encounter errors

I'm facing an issue with displaying an icon on my website. Here is the current setup in my code: app.js const http = require('http'); const fs = require('fs'); const express = require('express') const path = require(&apo ...

Exploring the Design of Autocompletion Lists on Chrome

Today, I need to bring a problem to your attention. For the past few weeks, there has been a design issue on my website in Chrome. My autocompletion list has become a total nightmare... Previously : Current situation : I want the list to be more promine ...

Ways to customize the alignment of nav-link items in Bootstrap 4

I am using Bootstrap 4 and have a set of three nav-link elements: <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav ...

To see website changes, refreshing with Ctrl + F5 is necessary in the browser

I have a simple website that uses only HTML and CSS. Whenever I upload new files to the site, they do not appear in the browser until I perform a hard refresh by pressing CTRL + F5. Does anyone have any suggestions on how to fix this issue? ...

Animate your menu on hover with jQuery!

I am experiencing an issue with centering the background image below a link. When using mouseleave, the image does not return exactly to the center of the list. Any assistance on how to resolve this would be greatly appreciated. Thank you! Here is the ref ...

Event object not being passed to function in UIWebView Javascript onclick event

When inserting HTML dynamically using simple NSStrings and then loading it into a UIWebview, the following approach is taken: [NSString stringWithFormat:@"<div onclick=\"MyClickEvent(e);\"....some more text here"> A function is defined li ...

Enhancing Time Precision in CakePHP: Introducing Quarter-Accurate Time Input

I'm currently implementing time inputs using the following code snippet: $form->input("time") However, the select boxes generated have minute-accuracy, which is unnecessary for my project. Is there a way to restrict the options in the select lis ...

What is the correct method for including the sanitize: false option in a popover?

Struggling to place a button within the Bootstrap Popovers? I attempted but failed. Currently using Bootstrap-Popover and aiming to include a button within the popover. var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-tog ...

What is the best way to implement a calendar view for selecting time periods on an HTML page?

Is there a way to implement a calendar view when clicking on the input box within an HTML page? I am looking to create a function where users can select a time period to generate a file. How can this be accomplished? If possible, could you share some samp ...

Error: jwt_decode function has not been declared

I'm currently working on a project and I've hit a roadblock while trying to fetch profile information for the logged-in account using a token. Despite using the JWT-decoding library, I keep encountering the issue where jwt_decode is not defined. ...

Utilize a while loop in JavaScript to trigger a message when a variable dips below zero

Forgive me if I seem clueless. I am a beginner in the world of Javascript and am currently experimenting with loops. At the moment, I am toying around with this particular piece of code: <!DOCTYPE html> <html> <body> <button oncl ...

Selecting multiple items in jQuery based on different attributes is a useful feature that

I am looking to choose multiple items based on their data attribute. Each item has a unique data-id. <div class="foo" data-id="1"></div> <div class="foo" data-id="2"></div> <div class=" ...