Jump to content

Archived

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

gstrahle

Responsive Nav Bar Width - Mobile Menu

Recommended Posts

gstrahle

I would like to effectively center the items listed in my nav bar menu shown in the header @ my website: http://3keymedia.com.. so that they responsively either scale in one row or trigger the mobile version menu at approximately 1131px width to show the mobile menu rather than having it visible 600px width...

 

all in all if there is a way to scale down my nav bar, centerd, without moving the icons into 2 rows that is what I most want to achieve...

Share this post


Link to post
Share on other sites
gstrahle

can anyone help me with this?

Share this post


Link to post
Share on other sites
gstrahle

or can someone give me an opinion of what options I may have achieving a single rowed nav bar that could scale my icons in size to avoid creating multipe rows of my icons in the nav bar before entering the responsive menu mode... (where the nav bar menu pops up to the side, @mobile device width)

Share this post


Link to post
Share on other sites
Danny

Hi

 

To do this you will need to use custom CSS and @media queries. However, yours custom CSS is going to require both CSS for your images and icons, as you're using both for you navigation.

 

For assistance with media queries see here:

 

http://css-tricks.com/css-media-queries/

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gstrahle

im not sure if I can accomplish this without spending days on top of the days I have already spent trying to figure out how to properly go about this... In the end I know this shouldn't take more than ten min thru CSS and even with years of experience in firebug and css I can't figure this one out... 

 

someone please help!!!

 

I am simply wanting to display my NavBar containing Icons and Images to scale in a single row... as the icons start shifting into secondary rows when I scale my page down until the media query triggers the mobile menu..  I want to maintain a single row style at all times in the navbar until the mobile menu is triggered..

 

I understand the css links above however, I am having trouble identifying which classes that need to be adjusted in order to properly achieve this..  If someone could please provide me with class and styles to implement it would be much appreciated...

Share this post


Link to post
Share on other sites
greenfly

Hello gstrahle - please show us the code that you have tried and we will try to point you in the right direction.


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
gstrahle
.section-navbar {
    font-family: "Open Sans","Helvetica Neue",Helvetica,sans-serif;
    font-weight: 300;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
 
 
.nav-btn-navbar {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: rgba(155, 155, 155, 0.027);
    background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.08));
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.17) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.17);
    border-image: none;
    border-radius: 5px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3) inset;
    color: inherit;
    display: none;
    float: right;
    margin: 5px;
    padding: 2px 10px;
    position: relative;
    text-align: center;
    z-index: 50;
}

 

 

 

Please Help still haven't figured this out...

Share this post


Link to post
Share on other sites
Danny

Unfortunately, we only provide limited CSS support and this would be considered extensive. If you're struggling, I would recommend signing up to a CSS forum for further assistance.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gstrahle

Please don't do this to me after all the money, support and time I have put into pagelines... 3 generations deep....  

 

help me, you don't think I have already been looking thru CSS forums for the past week on this issue??  

 

There are unique CSS elements to pagelines and buried or un-readable classes that I particualary need to adjust.  

 

I can't find them is what I am saying, YOU knowing the system front to back can take a look at this and help accomplish what I am trying to do in prob less than a min.  So please do not treat a 3rd generation pagelines supporter like this!!

Share this post


Link to post
Share on other sites
gstrahle

remember all I am trying to do is keep my menu items in my navbar centered.. and adjust the toggle to the mobile menu at a greater width equal to what triggers creating a second row in my navbar menu on smaller screens..

 

all I want to do is make sure I never get two rows in my nav bar, how do I do that?

Share this post


Link to post
Share on other sites
Danny

I apologise, but our custom CSS and customization support is limited and we do not provide the custom code for users. The support included when your purchase a DMS plan is anything related to technical, setting up, etc.. personal customization support is not included. If you're not comfortable with achieving this layout on your own, you're more than welcome to contact one of the developers on the resources page for assistance.

 

http://docs.pagelines.com/resources

 

This is a CSS question and therefore, the best resource for this kind of question is a CSS specific forum.

 

To center your navigation you will probably want to try this:

 

#site .navbar .navline { text-align: center; float: none; }
#site .navbar .navline > li { display: inline-block; float: none; }
 
However, you will also probably want to use media queries too reduce the width/height of your images and icons used in your NavBar when viewing on specific devices, especially if  you want to keep all images and icons on one row.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gstrahle

Thank You, That little snippet is all I needed!! Worked! understand the media query but almost liking the 2nd row of stacked icons now that they are centered properly..

 

Thank you so much means a lot to me to have achieved this, I knew it was very much a simple css fix but was having trouble reading in my firebug the proper tags

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×