css - Bootstrap responsive sidebar logo rendering on small devices -

-

I try to apply responsive sidebar menus with Bootstrap3 but I have problems rendering properly for small devices

The markup looks like 

  & lt; div id = "sidebar" class = "col-md-3" & gt; // If instead of displaying this logo desktop & lt; A class = "logo_big" href = "& lt; php bloginfo ('url')? & Gt; /" title = "& gt; php bloginfo ('name')? & Gt;" rel = "homepage" & Gt; & Lt; Img class = "img-responsive" src = "& lt ;? php echo get_template_directory_uri () ;? & gt; /library/images/logo.jpg" & gt; & Lt; / A & gt; & Lt; div class = "sidebar-nav" & gt; & Lt; Div class = "navbar navbar-default" role = "navigation" & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "sidebar-navbar-fall" & gt; & Lt; span class = "sr-only" & gt; Toggle Navigation & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Span class = "visible-sm navbar-brand" & gt; // If the mobile or tablet gives us this logo & lt; Class = "block-title navbar-brand" href = "& lt ;? php bloginfo ('url')? & Gt;" title = "& gt; php bloginfo ('name')? & Gt; rel = "Homepage" & gt; & Lt; Img class = "img-responsive logo" src = "& lt ;? php echo get_template_directory_uri () ;? & gt; /library/images/logo.jpg" & gt; & Lt; / A & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; div class = "navbar-collapse collapse sidebar-navbar-collapse" & gt; & Lt ;? Php bones_main_nav (); ? & Gt; & Lt; / Div & gt; & Lt ;! - /. Nav-collapse - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "right_sidebar_widgets" & gt; & Lt ;? php dynamic_sidebar ('sidebar 1'); ? & Gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 And here I have a custom CSS to present the logo, but the desired  
  .logo {display: none; } @ Media screen and (max-width: 800 pixels) {a.logo_big {display: none; } .logo {max-width: 145px; Status: Relative; Correct: 25px; Bottom: 25px; }}   
 Enter image details here   
 
 
 It is important to understand that  max-width: 145px;  As long as  width  is specified,  
 
 The maximum-width CSS property is used to determine the maximum width of a given element. This prevents the value of the use of the property that is larger than the specified value for maximum-width.   
 You also need to set the logo's  display  property in order to show it.  
 Try:  
  .logo {display: none; } @ Media screen and (max-width: 800 pix) {a.logo_big {display: none; } .logo {width: 145px; Status: Relative; display: inline-block; / * & Lt; --- set to display / / right: 25px; Bottom: 25px; }}

Comments

Post a Comment

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

-
Image
I have a requirement whenever I run my own kettle, dynamically took database connection parameters from an excel source Every run should go. I have an Excel column names: hostname, username, database, password. I want to pass these connection parameters to my table input stage dynamically whenever it runs the job. This is what I was trying to do. You can get it Connection parameters from the DB reading source (for example Excel or a CSV file in my example) < / Li> Store the parameters in the variable Using the variable in your connection's settings. Setting Variables Create another conversion for (you can not do it in the same conversion Uses): set variables element variable: The element that reads / writes your data creates a new connection and sets the connection parameter using $ {variable name_} Note that you will need to type in the field field in the field $ {password} Also keep in mind that this can be a security problem as the
Read more

multithreading - PhantomJS-Node in a for Loop -

-
I am trying to implement a screen-scraps application that opens a URL in which a parameter changes as it is for a loop: var data = [ '100', '101', '102', '103', '104']; (Var indexA = 0; indexA & lt; data.length; indexA ++) for {Phantom Generation ({'port': freeport}, function (pH) {ph.create page (function (page) {page.open ("http: //...++ data [index B] +" ... " , Status {console.log ("open site:" + data [index B], position); / * OLD * / indexB ++; page evaluation (function () {// page scrape and an object Return}, function {console.log (result.dataRequest); // here is the problem}); / * new and fixed * / indexB ++} first console Logs it: Open Site: 100 Success Opens Site: 101 Success B Ola Site: 102 Success Opening Site: 103 Success Opened Site: 104 Success Which is good. Data is verified in scrap HTML and from index to array Matches. So in page 101 I scrap '101 and retrieve' and pu
Read more

c++ - MATLAB .m file to .mex file using Matlab Compiler -

-
I know that it can speak as a very famous topic, but something that helps me with it Not found This scenario is: I have my functions function, no matter what's inside, it's a generic function that may depend on other toolboxes. Does. Has input and output; I want to generate the same myFun.mex function; : Lib myFun This way I get some new files: libmyfun.c libmyfun.dll Libmyfun.exp libmyfun.exports libmyfun .h libmyfun.lib Reading around and I think that Creating a myfun.cpp that is very famous is included: / * gateway function * / zero max function (ent NLHS, MXARRA * PLS [], int NRHS, CONST M Xeray * PHS []) Here is the Variable Deals * / / * code here * /} I have tried to do this and are called Regular of Max Generation: Max ('- v', 'myfun.cpp') But I get many errors, and I should say that my myfun.cpp copy / Paste Function is where I have a lot of doubts ... especially on input / output management. My q
Read more