Jump to content

Archived

This topic is now archived and is closed to further replies.

ScribbleGD

Navbar positioning in mobile view

Recommended Posts

ScribbleGD

Hi there,

 

Just having a slight issue with the layout of my navbar and social media buttons when my website is viewed via mobile. They are stack on top of each on the left which creates a lot of white space and looks messy. Can you suggest a method of how I can have the menu button and the social media buttons appear on the same line and centered vertically so it is a bit cleaner? Thanks in advance.

 

Website URL: http://staging.scribblegraphicdesign.com.au/
Framework Version: DMS2
WordPress Version: 4.1.3
 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The link to your site is installing WordPress, therefore can you provide a link to the site in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ScribbleGD

Hi there,

 

Any thoughts on this? Would really like the logo and nav "menu" button on mobile view to be horizontally aligned whilst the social media buttons disappear.

 

Any help would be appreciated, thanks.

 

Tim

Share this post


Link to post
Share on other sites
Danny

Hi Tim,

 

You will need to use custom CSS in the form of media queries to align the logo and navigation horizontally. You can find more information about media queries from the following articles:

 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://cssmediaqueries.com/

 

Please be aware that our customisation support is limited.

 

As for the hiding the social icons, you will want to do the same thing, but instead of aligning them, you will want to use display: none; For example:

 

Add the following class to your TextBox (what you have your social icons in) styling classes field option:

 

hide-on-mobiles

 

Then add the following to your custom CSS:

 

@media screen and (max-width: 568px) {
  .hide-on-mobiles {
    display: none !important;
  }
}
 
This will hide the social icons on mobile devices.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ScribbleGD

Hi Danny,

 

Thanks for your help, will check those links out.

 

I have currently added padding and height to the nav bar with the CSS below - 

 

.navbar.navbar-content-width {
    border-radius: 4px 4px 4px 4px;
    font-size: 14pt;
    min-height: 50px;
    padding-top: 25px;
}
 
How do I disable the "padding-top: 25px" and "min-height: 50px" on mobile devices? Thought this might have worked - 
 
@media screen and (max-width: 568px) {
  .navbar .navbar-content-width {
    min-height: 0px !important;
    padding-top: 0px !important;
  }
}
 
but it doesn't seem to?
 
Tim

Share this post


Link to post
Share on other sites
Danny

I have visited your website and reduced my browsers width and I am not seeing that CSS being loaded in. Therefore, are you sure you have added it ?

If it isn't working, try adding the !important declaration to each of the values.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ScribbleGD

Hi Danny,

 

Strange, I can't see it either in Chrome Developer Tools when my browser is reduced. It is definitely in the Custom LESS/CSS section though written like this - 

 

@media screen and (max-width: 568px) {
  .navbar .navbar-content-width {
    min-height: 0px !important;
    padding-top: 0px !important;
  }
}
 
.navbar.navbar-content-width {
    border-radius: 4px 4px 4px 4px;
    font-size: 14pt;
    min-height: 50px;
    padding-top: 25px;
}
 
Tim

Share this post


Link to post
Share on other sites
Danny

If you have added the custom CSS and it is not loading, you either have a plugin causing a conflict or your have CSS causing an error. I recommend disabling all plugins and then remove all custom CSS, except for the media query and see if it then loaded.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×