My dropkick look strange - http://i.imgur.com/0itAA.png
Container is bigger, than dropdown list.
My html:
<div class="text_over_field">
<b>Your language preferences</b>
<b>This is language you would like Print-it-Green service to be displayed in</b>
</div>
<div class="field">
<div class="dk_container dk_theme_default" id="dk_container_color" tabindex="7" style="display: block; ">
<a class="dk_toggle" style="width: 149px; ">
<span class="dk_label">English</span></a>
<div class="dk_options" style="top: 29px; ">
<ul class="dk_options_inner">
<li class="dk_option_current"><a data-dk-dropdown-value="">English</a></li>
<li class=""><a data-dk-dropdown-value="#E15A01">Israeli</a></li>
<li class=""><a data-dk-dropdown-value="#604A42">Ukrainian</a></li>
</ul>
</div>
</div>
</div>
<div class="submit" >
</div>
Check the CSS markup
Check the HTML markup
All is wrapped in form_for_new class.
Also, it crashed my form.
What you can say about it ?
Related
I'm trying to center the search bar in the middle of the header in my WordPress website.
However, since I'm using a ready-made theme (Flatsome), the classes has already been made which make it more difficult to customize.
The problem is that the elements of the header use the same classes, which mean if i target one element another part get affected as well.
The website is here: toolstrading.se
I have been working with this code below.
.nav-uppercase {
text-align: center;
float: none;
display: inline-block;
margin-left: -30px;
}
As you can see, the elements on the right get affected by the CSS change
Appreciate all help I can get, since I'm getting crazy by this.
Thank you!
Edit
Here is the whole header block.
<header id="header" class="header has-sticky sticky-jump">
<div class="header-wrapper">
<div id="masthead" class="header-main nav-dark">
<div class="header-inner flex-row container logo-left medium-logo-center" role="navigation">
<!-- Logo -->
<div id="logo" class="flex-col logo">
<!-- Header logo -->
<a href="https://toolstrading.se/" title="Scandinavian Tools - Din helhetsleverantör av verktyg" rel="home">
<img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header_logo header-logo" alt="Scandinavian Tools"><img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header-logo-dark" alt="Scandinavian Tools"></a>
</div>
<!-- Mobile Left Elements -->
<div class="flex-col show-for-medium flex-left">
<ul class="mobile-nav nav nav-left ">
<li class="nav-icon has-icon">
<a href="#" data-open="#main-menu" data-pos="right" data-bg="main-menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-controls="main-menu" aria-expanded="false">
<i class="icon-menu"></i>
</a>
</li> </ul>
</div>
<!-- Left Elements -->
<div class="flex-col hide-for-medium flex-left
flex-grow">
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
<!-- Right Elements -->
<div class="flex-col hide-for-medium flex-right">
<ul class="header-nav header-nav-main nav nav-right nav-uppercase">
<li class="account-item has-icon
has-dropdown">
<a href="https://toolstrading.se/my-account/" class="account-link account-login
" title="Mitt konto">
<span class="header-account-title">
Admin </span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active">
Kontopanel
<!-- empty -->
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
Beställningar
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--downloads">
Nedladdningar
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
Adresser
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
Kontouppgifter
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
Logga ut
</li>
</ul>
</li>
<li class="header-divider"></li><li class="cart-item has-icon has-dropdown">
<a href="https://toolstrading.se/cart/" title="Varukorg" class="header-cart-link is-small">
<span class="header-cart-title">
<span class="cart-price"><span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span>
</span>
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="html widget_shopping_cart">
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
× <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons">Visa varukorgTill kassan</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- Mobile Right Elements -->
<div class="flex-col show-for-medium flex-right">
<ul class="mobile-nav nav nav-right ">
<li class="cart-item has-icon">
<a href="https://toolstrading.se/cart/" class="header-cart-link off-canvas-toggle nav-top-link is-small" data-open="#cart-popup" data-class="off-canvas-cart" title="Varukorg" data-pos="right">
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<!-- Cart Sidebar Popup -->
<div id="cart-popup" class="mfp-hide widget_shopping_cart">
<div class="cart-popup-inner inner-padding">
<div class="cart-popup-title text-center">
<h4 class="uppercase">Varukorg</h4>
<div class="is-divider"></div>
</div>
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
× <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons">Visa varukorgTill kassan</p>
</div>
<div class="cart-sidebar-content relative"></div> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="container"><div class="top-divider full-width"></div></div>
</div><div id="wide-nav" class="header-bottom wide-nav nav-dark flex-has-center">
<div class="flex-row container">
<div class="flex-col hide-for-medium flex-left">
<ul class="nav header-nav header-bottom-nav nav-left nav-size-medium nav-spacing-xlarge">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-28 current_page_item menu-item-30 active menu-item-design-default">Hem</li>
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 menu-item-design-default">Webbshop</li>
<li id="menu-item-48410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48410 menu-item-design-default">Erbjudanden</li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64 menu-item-design-default">Leasing</li>
</ul>
</div>
<div class="flex-col hide-for-medium flex-center">
<ul class="nav header-nav header-bottom-nav nav-center nav-size-medium nav-spacing-xlarge">
</ul>
</div>
<div class="flex-col hide-for-medium flex-right flex-grow">
<ul class="nav header-nav header-bottom-nav nav-right nav-size-medium nav-spacing-xlarge">
<li class="html header-button-1">
<div class="header-button">
<a href="http://partytent.se" class="button secondary" style="border-radius:99px;">
<span>Letar du efter tält och tillbehör?</span>
</a>
</div>
</li>
</ul>
</div>
<div class="flex-col show-for-medium flex-grow">
<ul class="nav header-bottom-nav nav-center mobile-nav nav-size-medium nav-spacing-xlarge">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-1">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-1" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
</div>
</div>
<div class="header-bg-container fill"><div class="header-bg-image fill"></div><div class="header-bg-color fill"></div></div> </div>
</header>
Add this styling
.header-nav.header-nav-main.nav.nav-left.nav-uppercase {
justify-content: center;
}
I checked the HTML structure of your site with the url you provided.
With the Chrome Dev Tools I inspected to find which element was the main container for your search bar.
This element is your main container and it is responsible for the centering:
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
Notice the class "nav-left"? ...Change it to the class "nav-center".
<ul class="header-nav header-nav-main nav nav-center nav-uppercase">
This will center your search like that:
https://i.imgur.com/DsyIMlX.png
You might need a Wordpress Child Theme to add custom CSS that does not get erased when you update your Wordpress version. And your CSS inside the Child Theme could target that main element.
#header ul.header-nav-main {
justify-content: center !important;
}
The !important is a specificity maximum level to be 100% sure that nothing else will bypass your rule. Sometimes Wordpress has a lot of different CSS in many different files. If you can avoid the !important keyword it's even better.
Edit2:
Okay, the problem was, that I used a <div class="row"> around the <div class="topimage"> tag. Strange. Could someone explain why it is?
I'm pretty new to bootstrap and created a web page for learning purposes.
Everything is working pretty well so far, except the navbar.
This is my nav code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headertest ">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<form class="navbar-form navbar-left">
<button class="btn btn-default">ENTDECKEN</button>
<button class="btn btn-default">FINDEN</button>
<button class="btn btn-default">PLANEN</button>
<p class="font">
<b> Zurück zur Hafenseite |</b> <a style="text-decoration: none">Salsbury & Mysteriöses Stonehenge</a>
</p>
</form>
</div>
<div class="col-sm-2 ">
<div class="navbar-form">
<img src="../assets/aida.png" class="logo ">
</div>
</div>
<div class="col-sm-4">
<div class="navbar-form navbar-right">
<form action="#" style>
<div class="dropdown">
<img src="../assets/lupe.png" class="icons" />
<img src="../assets/telefon.png" class="icons" />
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Erste Aktion</li>
<li>Zweite Aktion</li>
<li>Noch eine Aktion</li>
<li role="separator" class="divider"></li>
<li>Ein Link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
</div>
The problem is, if I use the navbar-fixed-top class, the content inside the navbar is jumping while I scroll.
Like the top margin is vanishing while I'm scrolling down and if I Scroll up, the margin (or whatever the problem is) just magically appears back.
Normal and scrolling up:
Scrolling down:
I hope you can see what I mean.
Does anybody know what I'm doing wrong?
(my css classes shouldn't be the problem. If I delete them, the content still keep "jumping")
Thank you
Edit:
I have an image as the first item (after the navbar) that seems to cause the problems.
If I delete it, the navbar is working as expected.
Css:
.topimage{
height: 600px;
width: 100%;
align-self: center;
background-image: url("./assets/testbild3.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
and how I implemented it:
<div class="row">
<headertest></headertest><!-- navbar component -->
</div>
<div class="row ">
<div class="topimage">
</div>
</div>
The fiddler link: (where it works without "jumping" navbar content)
https://jsfiddle.net/Biberium/g52cd6v8/
It's probably a silly question, but I don't understand why it doesn't work.
I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.
I wrote the following HTML for this:
<div class="btn-group">
<ul class="dropdown-menu" style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<span>My image</span>
</div>
<div class="pull-left">
<div>Text on the right</div>
<div>Second line of text</div>
</div>
</a>
</li>
</ul>
</div>
Link to jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/
However, width is not calculated properly and the second floated block is moved below the first block.
I don't understand why it happens and what to do to fix this.
P.S. I know I can implement it with display: table-cell, but I just don't understand the reason why my approach doesn't work.
I think problem is how you use dropdown-menu class, try this:
<div class="btn-group">
<ul style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</div>
<div class="pull-right">
<p>Text on the right</p>
<p>Second line of text</p>
</div>
</a>
</li>
</ul>
If you want use a dropdown-menu, you can look an example in this page:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Hope it helps.
I have a sticky top-bar, ie something like:
<div id="main-navigation" class="top-bar-container" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
<strong>My Brand</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
And now I have a row that I want to stick to it, but it does not work properly (it sticks to the top of the page when I scroll):
<div class="filter-row row" data-sticky-container>
<div class="sticky column expanded" data-sticky data-top-anchor="main-navigation:bottom">
</div>
</div>
P.S.: the main-navigation sticks properly.
I've got a strange problem with chrome.
My code works like a charm in safari, chrome (5.x.x), explorer and firefox. But with a recent chrome update (7.x or 8.x) it doesn't.
Here is the code i wrote:
<div class="result">
<div class="favoris">
<a class="favorisClick"><img src="images/favoris.png"</a>
</div>
<div class="favorisContent resultDim">
<h1 class="favTitle">0 FAVORIS</h1>
<ul id="favResult">
<!-- js insert things here -->
</ul>
</div>
<div class="resultContent resultDim">
<h1 class="nbrResult">0 TITRES</h1>
<ul id="resultContent">
<!-- js insert things here -->
</ul>
<div id="nav">
<ul>
</ul>
</div>
</div>
<div class="infos">
<a class="infosClick"><img src='images/infoUp.png' alt='show info' /></a>
<div class="infosContent">
<ul id="infosContent">
<li>Sélectionez un morceau.</li>
</ul>
<ul>
<li id="dl"></li>
<li></li>
</ul>
</div>
</div>
</div>
With safari, ff, old chrome and ie, i see this code with the added content by the js.
With a new version of chrome here's what i get :
<div class="result">
<div class="favoris">
<a class="favorisClick">
<img src="images/favoris.png" <="" a=""/>
</a>
</div>
<a class="favorisClick">
<div class="favorisContent resultDim" style="display: none; ">
<h1 class="favTitle">0 FAVORIS</h1>
<ul id="favResult">
</ul>
</div>
<div class="resultContent resultDim">
<h1 class="nbrResult">16 TITRES</h1>
<ul id="resultContent">
***RESULT CONTENT***
</ul>
<div id="nav">
</div>
</a>
<div class="infos">
<a class="favorisClick"/>
<a class="infosClick">
<div class="infosContent" style="display: none; ">
<ul id="infosContent">
</ul>
</div>
</div>
</div>
I dunno why it add this $&#$X1& <a class="favorisClick"> and </a> and the <a class="favorisClick" /> it happens ONLY whith recent chrome version ... it make me turn completely mad !!
I don't even know how to search for this issue on google...
Please help me :)
<div class="favoris">
<a class="favorisClick"><img src="images/favoris.png"</a>
</div>
It looks like you're not closing your image tag...