Въпрос за фиксирано меню

M

Messiah

Registered
Здравейте,
Искам към примерното меню което да е дадено да сложа още едно отгоре, както е на сайта https://www.cooolbox.bg/, от основното меню има отгоре друго меню на което да сложа телефон и други неща. Ползвам този код:
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h1>Fixed Top Menu</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>
</html>
 
anonimen каза:
Какво те спира да добавиш още един div с линкове в него, точно преди navbar?
Увеличете...
Да, и да го стайлнеш с css.

www.w3schools.com

How To Create a Fixed Menu

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com

На WP ли си?
 
Здравейте, отново да за да не пускам нова тема. Имам проблем с един прайс лист. Значи всичко ми излиза както съм го задал, но искам да направя само по 3 плана да излизат на ред за да може да не се свива тексата за скоростите както е сега.
Прикачвам си снимка да за добиете представа за това което искам.
prolan.jpg
Ето това ми е HTML кода:
HTML: 
<div>
  <div class="container">
    <div class="panel pricing-table">
      
      <div class="pricing-plan">
        <img src="https://s22.postimg.cc/8mv5gn7w1/paper-plane.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Базов</h2><br>
   <table style="width: 64%">
                    <tr>
                        <td>БГ Download</td>
                        <td>60 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>БГ Upload</td>
                        <td>60 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Download</td>
                        <td>60 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Upload</td>
                        <td>60 Mbp/s</td>
                    </tr>
                </table>
        <span class="pricing-price">20.<sup>00</sup> лева</span><br>
        <a href="#/" class="button">Заявка за включване</a>
      </div>
      
      <div class="pricing-plan">
        <img src="https://s28.postimg.cc/ju5bnc3x9/plane.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Мания</h2>
   <table style="width: 64%">
                    <tr>
                        <td>БГ Download</td>
                        <td>100 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>БГ Upload</td>
                        <td>100 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Download</td>
                        <td>100 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Upload</td>
                        <td>100 Mbp/s</td>
                    </tr>
                </table>
        <span class="pricing-price">30.<sup>00</sup> лева</span><br>
        <a href="#/" class="button">Заявка за включване</a>
      </div>
      <div class="pricing-plan">
        <img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Про 60</h2>
   <table style="width: 64%">
                    <tr>
                        <td>БГ Download</td>
                        <td>200 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>БГ Upload</td>
                        <td>200 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Download</td>
                        <td>200 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Upload</td>
                        <td>200 Mbp/s</td>
                    </tr>
                </table>
        <span class="pricing-price">30.<sup>00</sup> лева</span><br>
        <a href="#/" class="button">Заявка за включване</a>
        </div>
      <div class="pricing-plan">
        <img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Премиум 300</h2>
   <table style="width: 64%">
                    <tr>
                        <td>БГ Download</td>
                        <td>300 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>БГ Upload</td>
                        <td>60 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Download</td>
                        <td>300 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Upload</td>
                        <td>60 Mbp/s</td>
                    </tr>
                </table>
        <span class="pricing-price">35.<sup>00</sup> лева</span><br>
        <a href="#/" class="button">Заявка за включване</a>
        </div>
      <div class="pricing-plan">
        <img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Премиум 800</h2>
   <table style="width: 64%">
                    <tr>
                        <td>БГ Download</td>
                        <td>800 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>БГ Upload</td>
                        <td>300 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Download</td>
                        <td>800 Mbp/s</td>
                    </tr>
                    <tr>
                        <td>Интернет Upload</td>
                        <td>300 Mbp/s</td>
                    </tr>
                </table>
        <span class="pricing-price">80.<sup>00</sup> лева</span><br>
        <a href="#/" class="button">Заявка за включване</a>
        </div>
    </div>
  </div>
</div>
</div>
А това ми е CSS кода:
CSS: 
/* Start Pricetable */
html {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.background {
  padding: 0 25px 25px;
  position: relative;
  width: 100%;
}

.background::after {
  content: '';
  background: #60a9ff;
  background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
  background: -webkit-linear-gradient(top, #60a9ff 0%,#4394f4 100%);
  background: linear-gradient(to bottom, #60a9ff 0%,#4394f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60a9ff', endColorstr='#4394f4',GradientType=0 );
  height: 350px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

@media (min-width: 900px) {
  .background {
    padding: 0 0 25px;
  }
}

.container {
  margin: 0 auto;
  padding: 50px 0 0;
  max-width: 1800px;
  width: 100%;
}

.panel {
  background-color: #fff;
  padding: 15px 25px;
  position: static;
  width: 100%;
  z-index: 10;
}

.pricing-table {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .pricing-table {
    flex-direction: row;
  }
}

.pricing-table * {
  text-align: left;
  text-transform: uppercase;
}

.pricing-plan {
  border-bottom: 1px solid #e1f1ff;
  padding: 25px;
 
}

.pricing-plan:last-child {
  border-bottom: none;
}

@media (min-width: 900px) {
  .pricing-plan {
    border-bottom: none;
    border-right: 1px solid #153269;
    flex-basis: 100%;
    padding: 25px 50px;
  }

  .pricing-plan:last-child {
    border-right: none;
  }
}

.pricing-img {
  margin-bottom: 25px;
  max-width: 100%;
}

.pricing-header {
  color: #153269;
  font-weight: 600;
  letter-spacing: 1px;
}

.pricing-price {
  color: #153269;
  display: block;
  font-size: 32px;
  font-weight: 700;
  padding: 15px 0;
}
sup {
    vertical-align: super;
    font-size: smaller;
    position: static;
}
/* End Pricetable */
 
Няма смисъл, те са 5..трябват ти 6,за да изглежда добре.. Замисли се и ги вкарай в някой слайдър плъгин.. Има бол слайдъри в нета, carousel-и и т.н.
Със слайдър ще е най-добре. 3 да се показват и другите 2 след клик на стрелкичка..
 
Ако не са ти помогнали до утре, аз бих се заел.. Сега съм от телефона и няма как :)
 
В слайдер се крие информация която не е важна...
Прави ги по три на ред и като 6ти запис сложи ако никой план не покрива вашите изисквания свържете се с нас
 
Здравей,
Както обещах прегледах кода и няма как на този етап да стане, но направих други по урок в нета, които са също добри и са почти същите, даже може да ги модифицираш още малко.

Качвам и демо снимка.
Риспонсив са и ще се виждат добре и под мобилни дисплеи.
Постарах се да ги догодя като твоите.

CSS: https://pastebin.com/sNbz8HQH
HTML: https://pastebin.com/d8NtrBui

Принципно изглеждат още по-добре, но намалих малко скрийна, тъй като съм под лаптоп с малък дисплей!
Ако искаш нещо да се промени - питай.
Също така ако има някакъв проблем - пак питай, но най-вероятно може някой клас да се пре-повтаря с някой текущ от твоите и да трябва да му се смени името.
Изтрий всичко при теб и добави кодовете, които ти дадох.
А това:
CSS: 
* {
  box-sizing: border-box;
}
E хубаво да седи най-горе в CSS файла ти, но тествай първо и кажи как е :)
 

Прикачени файлове

  • дс.png
    дс.png
    54.7 KB · Преглеждания: 8
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе