☰

» »

Bootstrap pomoč- Preheader

Bootstrap pomoč- Preheader

Klemen97 ::

Pozdravljeni,

na spletni strani imamo fixed header, kar pomeni da ko scrollaš dol, je vedno viden. Nad tem fixed headerjem pa bi rad dodal še nekaj informacij kot je vidno na sliki.
Slika

Slika



Uporabljam pa bootstrap. Kako bi to naredil?

zbrisan ::

v htmlju pred fixed headerjem das nov div container pa ta text not razen ce hoces da je to tudi del fixed headerja.

crniangeo ::

nice email :)
Convictions are more dangerous foes of truth than lies.

Klemen97 ::

WillyPeanut- super bi bilo, če je tudi ta del del fixed headerja, ker takoj ko nastaviš navigation bar-u da je fixed top, prekrije ta div z containerjom. Probaval sem z paddingom, ampak ne štima.

crniangeo- samo primer iz interneta, ni moje :)

bluefish ::

Povišaš header na želeno skupno višino, hkrati paziš na kak padding drugje na strani. Potem pa v vrh headerja vstaviš nov div.

Brez konkretne kode je to sicer bolj ko ne filozofiranje.

Zgodovina sprememb…

  • spremenil: bluefish ()

zbrisan ::

Kaj takega mogoce

Slika

Slika




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Company</title>
    <link rel="stylesheet" href="../bower_components/mdi/css/materialdesignicons.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <script src="../js/bootstrap.js"></script>
</head>
<body>

<div class="container offset-md-1 col-md-10 navbar-fixed-top">
    <nav class="navbar navbar-light bg-faded">

        <div class="container">
                <i class="mdi mdi-cloud-outline"> +289 360 826</i>
                <i class="mdi mdi-email-outline"> wfenddwk@wiejg.com</i>

            <div class="float-md-right">
                <i class="mdi mdi-facebook"></i>
                <i class="mdi mdi-twitter"></i>
                <i class="mdi mdi-vine"></i>
                <i class="mdi mdi-linkedin"></i>
                <i class="mdi mdi-instagram"></i>
            </div>
        </div>

        <a class="navbar-brand" href="#">
            <img src="http://tinyurl.com/jzatfgs" width="150" height="30" class="d-inline-block align-top" alt="">
        </a>
        <ul class="nav navbar-nav float-md-right">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Job Seekers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Employeers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
            <li class="nav-item">
                <button type="button" class="btn btn-primary">Login</button>
            </li>
            <li class="nav-item">
                <button type="button" class="btn btn-secondary">Sign Up</button>
            </li>
        </ul>
    </nav>
</div>

<div class="container offset-md-2 col-md-8">
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
    <p>JDHGJHSDFJGH</p>
</div>

</body>
</html>

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1298368121 (27258) sunniegoldie
»

Glavni menu vedno na vrhu strani (frozen)

Oddelek: Izdelava spletišč		212536 (1677) Dr.S
»

Neznana napaka pri izdelavi spletne

Oddelek: Izdelava spletišč		444168 (3241) MisterR
»

Kako postaviti ozadje v CSS-ju

Oddelek: Izdelava spletišč		315135 (4866) gnomee
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč		62705 (2652) amaze646

Več podobnih tem