Top Bar Mobile Sizing

  • Resolved mainahgal

    (@mainahgal)


    9 years, 8 months ago

    I’ve been asking a lot of questions lately, sorry! Thank you for all the help!

    My site is,

    http://triplumb.com/

    If you visit there on a mobile the top bar is all messed up. I’ve tried all sorts of code to resize it so that the social icons don’t stack vertically etc. Also I cannot get the contact page to resize nicely in mobile. Can someone help me and give me some custom css to fix both these issues…

    Here is the custom css I have already for the whole site in case an error there may be the cause.

    #nav-main ul.sf-menu > li > a:hover {background: #72b33f; color: #fff;}

.main {
    width: 100%;
}
.topbarmenu ul li a {
color: #444d54;

}

.kad-sidebar {
    display: none;
}

.page-header {
display: none;
}

.topbarmenu ul li a {
    font-size: 25px;
}

}

.home-iconmenu a i {color:#ffffff;} /*icon color*/
.home-iconmenu a h4 {color:#ffffff;} /*text color*/
.home-iconmenu a {background:#444d54;} /*background color*/
.home-iconmenu a:hover {background:#72b33f;} /*background on hover color*/

@media (max-width: 768px){
.home-iconmenu {
width: 50%;
float: left;
}

}

.kad-topbar-right {
    width: 10%;
}
@media (min-width: 1200px) {
.topbar_social ul {
    float: right;
    }

.kad-topbar-left {
    width: 70%;
}

.kad-topbar-right {
    width: 30%;

}
@media (min-width: 992px) {
.topbar_social ul {
    float: right;
    }

.kad-topbar-left {
    width: 0%;
}

.kad-topbar-right {
    width: 100%;

}
Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • lunacodes

    (@lunacodes)

    9 years, 8 months ago

    Hi mainahgal,

    I played around with the site in Chrome’s Dev tools. Have you tried setting the width of .topbar-widget? I found that when I set width or min-width to a pixel based value, it cleared up the issue. Using proportional units like percent or rem didn’t work.

    This was my code

    .topbar-widget {
    .min-width: 200px
}

    You may also be able to target it by its id of #topbar-search via css or javascript.

    Hope it helps!

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    I wish it helped 🙁 No matter what I do that code doesn’t get the mobile view to be nice.

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    I cleaned up the custom codes I have…Here they are for anyone’s reference again. 

    #nav-main ul.sf-menu > li > a:hover {background: #72b33f; color: #fff;}

}

.main {
    width: 100%;

}

.kad-sidebar {
    display: none;
}

.page-header {
display: none;

}

.topbarmenu ul li a {
    font-size: 25px;
}

.home-iconmenu a i {color:#ffffff;} /*icon color*/
.home-iconmenu a h4 {color:#ffffff;} /*text color*/
.home-iconmenu a {background:#444d54;} /*background color*/
.home-iconmenu a:hover {background:#72b33f;} /*background on hover color*/

}

@media (max-width: 768px){
.home-iconmenu {
width: 50%;
float: left;

}

.kad-topbar-right {
    width: 10%;
}
@media (min-width: 1000px) {
.topbar_social ul {
    float: right;
}

.kad-topbar-left {
    width: 70%;
}

.kad-topbar-right {
    width: 30%;

}

@media (min-width: 992px) {
.topbar_social ul {
    float: right;

}
    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    Okay, I got the topbar menu to work with this custom css code…

    @media (max-width: 767px) {
header.banner.headerclass {
    padding-top: 40px;
 }
}

    Now the only problem I am struggling with is getting the mobile view of my contact page to look nice in mobile view. Does anybody have any idea what css to use to get the view on mobile to look nice?

    Thanks so much!

    ~Lydia

    lunacodes

    (@lunacodes)

    9 years, 8 months ago

    In dev tools, if I set the height of main using px to the height of all the elements (ie the form and the map) and then use position: relative on the iframe for the map and position it using top, left, etc. I can get it to work. I had to write inline css for the iframe though, b/c chrome won’t seem to let me modify the class after I add it. Theoretically, you should be able to target it in your stylesheet though.

    You also may want to consider using flexbox, as it’s good for this sort of thing.

    That’s as much as I can advise.

    Good Luck!

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    I wish I could figure all that out. I’m not versed in those things though. Maybe this will help to distinguish some css that might work.

    The only page having issues is the page with an embedded google map and a form builder placed with a shortcode. These two items don’t seem to resize nicely in the mobile view. Is there a quick css fix to make these two items stack in the page or resize to fit side by side nicely in the page in a mobile view?

    Kevin

    (@jx-3p)

    9 years, 8 months ago

    I suggest using the default Contact page template and configuring the map and forms in the page edit screen. If you see here:
    http://themes.kadencethemes.com/virtue/contact-us/

    The default contact form and map are responsive and display well on mobile.

    Does this option work for you?

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    I have done as you said. I got rid of the plugin i was using for a contact form and I’ve done a contact form through virtue on my contact us page. It isn’t displaying the address I inserted into the contact form. And the alignment is all messed up. How can I get the map to display and the contact form to be on another side in the page? Much like the kadance demo contact page?

    http://triplumb.com/contact/

    Thank you so much for the help! I appreciate it!

    Kevin

    (@jx-3p)

    9 years, 8 months ago

    In order for your contact page map to load, you need to retrieve and input your Google Maps API code:
    https://www.kadencethemes.com/retrieving-google-maps-api/

    Try following these steps and let me know if your map works after that.

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    That was done days ago. I have the API all set up exactly how the tutorial says 🙂

    Kevin

    (@jx-3p)

    9 years, 8 months ago

    You’re getting this error on your page, which indicates that the URL you used when you got the API isn’t configured correctly:
    https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    Thanks so much! I didn’t know that. I’m gonna get that fixed now and see what happens 🙂

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    Okay, so I fixed the api key and a map is being displayed, Thanks so much! Now I just need to figure out how to align these two elements, the contact form and the map to be beside each other and any text I write in the body to be above.

    Kevin

    (@jx-3p)

    9 years, 8 months ago

    Something is adding this CSS to your site:

    #mapheader > .container {
    width: 40%;
    padding:5;
    float: left;
}
.page-template-page-contact-php #main {
   width: 0%;
   float: right;

}

.contactformcase {
    width: 60%;
    float: right;

}

    If you can remove that, then it should display as seen on the demo site. It may be a plugin that’s adding this, so I suggest going through your added plugins and deactivating one by one to see if that fixes the issue.

    Thread Starter mainahgal

    (@mainahgal)

    9 years, 8 months ago

    I deactivated all those codes except that mapheader which I’m playing around with. When I use nothing at all then the map is full width across the page at the top and the contact form is all the way left, it looks super funny and any text I input into the page itself is between the map and form, not on top of it all. I also cannot get the form to come closer to the top of the page. It just sits hanging in the middle.

Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘Top Bar Mobile Sizing’ is closed to new replies.